<!DOCTYPE html><html><head><meta charset="utf-8"><title>Angular - 国际化（i18n）</title><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="search" type="application/opensearchdescription+xml" href="assets/opensearch.xml"><link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16"><link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link href="assets/fonts/Material_Icons.css" rel="stylesheet"><link href="assets/fonts/Droid_Sans_Mono.css" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="manifest" href="pwa-manifest.json"><meta name="theme-color" content="#1976d2"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="translucent"><script async="" src="assets/js/analytics.js"></script><script>!function(e,a,n,t,s,c,g){e.GoogleAnalyticsObject=s,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(n),g=a.getElementsByTagName(n)[0],c.async=1,c.src="assets/js/analytics.js",~e.name.indexOf("NG_DEFER_BOOTSTRAP")||g.parentNode.insertBefore(c,g)}(window,document,"script",0,"ga")</script><script>window.onerror=function(){ga("send","exception",{exDescription:function(e,r,n,a,c){var l;e=e.replace(/^Error: /,""),l=c?c.stack.replace(/^Error: /,"").replace(e+"\n","").replace(/^ +/gm,"").replace(/^at /gm,"").replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm,"@$1\n").replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm,"@???$1\n"):r+":"+(n=n||"?")+":"+(a=a||"?");return(e+"\n"+l).substr(0,150)}.apply(null,arguments),exFatal:!0})}</script><script nomodule="" src="generated/ie-polyfills.min.js"></script><link rel="stylesheet" href="styles.10ba6936decaea45eabb.css"><style>@media screen and (-ms-high-contrast:active){.mat-toolbar{outline:solid 1px}}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media (max-width:599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}</style><style>.mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1,1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}</style><style>.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:.04}@media (hover:none){.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-button[disabled],.mat-flat-button[disabled],.mat-icon-button[disabled],.mat-stroked-button[disabled]{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button[disabled]{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab[disabled]{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab[disabled]{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-focus-overlay{border-radius:inherit;opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}@media screen and (-ms-high-contrast:active){.mat-button-focus-overlay{background-color:rgba(255,255,255,.5)}}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}@media screen and (-ms-high-contrast:active){.mat-button,.mat-fab,.mat-flat-button,.mat-icon-button,.mat-mini-fab,.mat-raised-button{outline:solid 1px}}</style><style>.mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-opened{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}@media screen and (-ms-high-contrast:active){.mat-drawer-backdrop{opacity:.5}}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}@media screen and (-ms-high-contrast:active){.mat-drawer,[dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}}@media screen and (-ms-high-contrast:active){.mat-drawer.mat-drawer-end,[dir=rtl] .mat-drawer{border-left:solid 1px currentColor;border-right:none}}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer{transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%,0,0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}</style><style>.nav-link.highlight[_ngcontent-c5]{color:#ff0}</style><style>.mat-progress-bar{display:block;height:4px;overflow:hidden;position:relative;transition:opacity 250ms linear;width:100%}._mat-animation-noopable.mat-progress-bar{transition:none;animation:none}.mat-progress-bar .mat-progress-bar-element,.mat-progress-bar .mat-progress-bar-fill::after{height:100%;position:absolute;width:100%}.mat-progress-bar .mat-progress-bar-background{width:calc(100% + 10px)}@media screen and (-ms-high-contrast:active){.mat-progress-bar .mat-progress-bar-background{display:none}}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}@media screen and (-ms-high-contrast:active){.mat-progress-bar .mat-progress-bar-buffer{border-top:solid 5px;opacity:.5}}.mat-progress-bar .mat-progress-bar-secondary{display:none}.mat-progress-bar .mat-progress-bar-fill{animation:none;transform-origin:top left;transition:transform 250ms ease}@media screen and (-ms-high-contrast:active){.mat-progress-bar .mat-progress-bar-fill{border-top:solid 4px}}.mat-progress-bar .mat-progress-bar-fill::after{animation:none;content:'';display:inline-block;left:0}.mat-progress-bar[dir=rtl],[dir=rtl] .mat-progress-bar{transform:rotateY(180deg)}.mat-progress-bar[mode=query]{transform:rotateZ(180deg)}.mat-progress-bar[mode=query][dir=rtl],[dir=rtl] .mat-progress-bar[mode=query]{transform:rotateZ(180deg) rotateY(180deg)}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-fill,.mat-progress-bar[mode=query] .mat-progress-bar-fill{transition:none}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary,.mat-progress-bar[mode=query] .mat-progress-bar-primary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-translate 2s infinite linear;left:-145.166611%}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-primary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary,.mat-progress-bar[mode=query] .mat-progress-bar-secondary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-translate 2s infinite linear;left:-54.888891%;display:block}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-secondary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-background-scroll 250ms infinite linear;display:block}.mat-progress-bar._mat-animation-noopable .mat-progress-bar-background,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-buffer,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary.mat-progress-bar-fill::after{animation:none;transition:none}@keyframes mat-progress-bar-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.70173,.49582);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.30244,.38135,.55,.95635);transform:translateX(83.67142%)}100%{transform:translateX(200.61106%)}}@keyframes mat-progress-bar-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.33473,.12482,.78584,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.66148)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.51506,.40969);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.28406,.8,.73371);transform:translateX(37.65191%)}48.35%{animation-timing-function:cubic-bezier(.4,.62704,.6,.90203);transform:translateX(84.38617%)}100%{transform:translateX(160.27778%)}}@keyframes mat-progress-bar-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.15,0,.51506,.40969);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.31033,.28406,.8,.73371);transform:scaleX(.4571)}44.15%{animation-timing-function:cubic-bezier(.4,.62704,.6,.90203);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-background-scroll{to{transform:translateX(-8px)}}</style><script charset="utf-8" src="toc-toc-module-ngfactory.36694c537d7ff0b2c081.js"></script><script charset="utf-8" src="default~code-code-example-module-ngfactory~code-code-tabs-module-ngfactory~getting-started-ng-for-ng~82f414e5.c64b8abba8f3b7168616.js"></script><script charset="utf-8" src="default~code-code-example-module-ngfactory~code-code-tabs-module-ngfactory.98830c4eaea3268880de.js"></script><script charset="utf-8" src="code-code-example-module-ngfactory.bb14a03c7095ffd0e7bd.js"></script><script charset="utf-8" src="code-code-tabs-module-ngfactory.e688ffb25bac166802a3.js"></script><script charset="utf-8" src="live-example-live-example-module-ngfactory.fef451c7b16613f97732.js"></script><script charset="utf-8" src="21.d3ebf64aa7b6d3a4b8f6.js"></script><style>.mat-card{transition:box-shadow 280ms cubic-bezier(.4,0,.2,1);display:block;position:relative;padding:16px;border-radius:4px}.mat-card .mat-divider-horizontal{position:absolute;left:0;width:100%}[dir=rtl] .mat-card .mat-divider-horizontal{left:auto;right:0}.mat-card .mat-divider-horizontal.mat-divider-inset{position:static;margin:0}[dir=rtl] .mat-card .mat-divider-horizontal.mat-divider-inset{margin-right:0}@media screen and (-ms-high-contrast:active){.mat-card{outline:solid 1px}}.mat-card-actions,.mat-card-content,.mat-card-subtitle{display:block;margin-bottom:16px}.mat-card-title{display:block;margin-bottom:8px}.mat-card-actions{margin-left:-8px;margin-right:-8px;padding:8px 0}.mat-card-actions-align-end{display:flex;justify-content:flex-end}.mat-card-image{width:calc(100% + 32px);margin:0 -16px 16px -16px}.mat-card-footer{display:block;margin:0 -16px -16px -16px}.mat-card-actions .mat-button,.mat-card-actions .mat-raised-button{margin:0 8px}.mat-card-header{display:flex;flex-direction:row}.mat-card-header .mat-card-title{margin-bottom:12px}.mat-card-header-text{margin:0 16px}.mat-card-avatar{height:40px;width:40px;border-radius:50%;flex-shrink:0;object-fit:cover}.mat-card-title-group{display:flex;justify-content:space-between}.mat-card-sm-image{width:80px;height:80px}.mat-card-md-image{width:112px;height:112px}.mat-card-lg-image{width:152px;height:152px}.mat-card-xl-image{width:240px;height:240px;margin:-8px}.mat-card-title-group>.mat-card-xl-image{margin:-8px 0 8px 0}@media (max-width:599px){.mat-card-title-group{margin:0}.mat-card-xl-image{margin-left:0;margin-right:0}}.mat-card-content>:first-child,.mat-card>:first-child{margin-top:0}.mat-card-content>:last-child:not(.mat-card-footer),.mat-card>:last-child:not(.mat-card-footer){margin-bottom:0}.mat-card-image:first-child{margin-top:-16px;border-top-left-radius:inherit;border-top-right-radius:inherit}.mat-card>.mat-card-actions:last-child{margin-bottom:-8px;padding-bottom:0}.mat-card-actions .mat-button:first-child,.mat-card-actions .mat-raised-button:first-child{margin-left:0;margin-right:0}.mat-card-title{margin-bottom:8px}.mat-card-subtitle:not(:first-child),.mat-card-title:not(:first-child){margin-top:-4px}.mat-card-header .mat-card-subtitle:not(:first-child){margin-top:-8px}.mat-card>.mat-card-xl-image:first-child{margin-top:-8px}.mat-card>.mat-card-xl-image:last-child{margin-bottom:-8px}</style><style>.mat-tab-group{display:flex;flex-direction:column}.mat-tab-group.mat-tab-group-inverted-header{flex-direction:column-reverse}.mat-tab-label{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;position:relative}.mat-tab-label:focus{outline:0}.mat-tab-label:focus:not(.mat-tab-disabled){opacity:1}@media screen and (-ms-high-contrast:active){.mat-tab-label:focus{outline:dotted 2px}}.mat-tab-label.mat-tab-disabled{cursor:default}@media screen and (-ms-high-contrast:active){.mat-tab-label.mat-tab-disabled{opacity:.5}}.mat-tab-label .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}@media screen and (-ms-high-contrast:active){.mat-tab-label{opacity:1}}@media (max-width:599px){.mat-tab-label{padding:0 12px}}@media (max-width:959px){.mat-tab-label{padding:0 12px}}.mat-tab-group[mat-stretch-tabs]>.mat-tab-header .mat-tab-label{flex-basis:0;flex-grow:1}.mat-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height .5s cubic-bezier(.35,0,.25,1)}.mat-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;flex-basis:100%}.mat-tab-body.mat-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-tab-group.mat-tab-group-dynamic-height .mat-tab-body.mat-tab-body-active{overflow-y:hidden}</style><style>.mat-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mat-tab-label{height:48px;padding:0 24px;cursor:pointer;box-sizing:border-box;opacity:.6;min-width:160px;text-align:center;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;position:relative}.mat-tab-label:focus{outline:0}.mat-tab-label:focus:not(.mat-tab-disabled){opacity:1}@media screen and (-ms-high-contrast:active){.mat-tab-label:focus{outline:dotted 2px}}.mat-tab-label.mat-tab-disabled{cursor:default}@media screen and (-ms-high-contrast:active){.mat-tab-label.mat-tab-disabled{opacity:.5}}.mat-tab-label .mat-tab-label-content{display:inline-flex;justify-content:center;align-items:center;white-space:nowrap}@media screen and (-ms-high-contrast:active){.mat-tab-label{opacity:1}}@media (max-width:599px){.mat-tab-label{min-width:72px}}.mat-ink-bar{position:absolute;bottom:0;height:2px;transition:.5s cubic-bezier(.35,0,.25,1)}.mat-tab-group-inverted-header .mat-ink-bar{bottom:auto;top:0}@media screen and (-ms-high-contrast:active){.mat-ink-bar{outline:solid 2px;height:0}}.mat-tab-header-pagination{position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2}.mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination{display:flex}.mat-tab-header-pagination-before,.mat-tab-header-rtl .mat-tab-header-pagination-after{padding-left:4px}.mat-tab-header-pagination-before .mat-tab-header-pagination-chevron,.mat-tab-header-rtl .mat-tab-header-pagination-after .mat-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-tab-header-pagination-after,.mat-tab-header-rtl .mat-tab-header-pagination-before{padding-right:4px}.mat-tab-header-pagination-after .mat-tab-header-pagination-chevron,.mat-tab-header-rtl .mat-tab-header-pagination-before .mat-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;content:'';height:8px;width:8px}.mat-tab-header-pagination-disabled{box-shadow:none;cursor:default}.mat-tab-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1}.mat-tab-list{flex-grow:1;position:relative;transition:transform .5s cubic-bezier(.35,0,.25,1)}.mat-tab-labels{display:flex}[mat-align-tabs=center] .mat-tab-labels{justify-content:center}[mat-align-tabs=end] .mat-tab-labels{justify-content:flex-end}</style><style>.mat-tab-body-content{height:100%;overflow:auto}.mat-tab-group-dynamic-height .mat-tab-body-content{overflow:hidden}</style></head><body><aio-shell ng-version="7.0.0" class="mode-stable sidenav-open page-guide-i18n folder-guide view-SideNav aio-notification-show"><div id="top-of-page"></div><mat-toolbar class="app-toolbar no-print mat-toolbar mat-primary mat-toolbar-multiple-rows" color="primary"><mat-toolbar-row class="notification-container mat-toolbar-row"><aio-notification expirationdate="2019-03-01" notificationid="survey-february-2019" class="ng-tns-c2-0 ng-trigger ng-trigger-hideAnimation"><span class="content"><a href="http://bit.ly/angular-survey-2019" target="_blank"><mat-icon aria-label="Announcement" class="icon mat-icon" role="img" svgicon="insert_comment" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon><span class="message"><b>填写这份《一分钟调查》</b>，帮我们（开发组）做得更好！</span><span class="action-button">去填写</span></a></span><button class="close-button mat-icon-button" aria-label="Close" mat-icon-button=""><span class="mat-button-wrapper"><mat-icon aria-label="Dismiss notification" class="mat-icon ng-tns-c2-0" role="img" svgicon="close" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon></span><div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div><div class="mat-button-focus-overlay"></div></button></aio-notification></mat-toolbar-row><mat-toolbar-row class="mat-toolbar-row"><button class="hamburger mat-button" mat-button="" title="Docs menu"><span class="mat-button-wrapper"><mat-icon class="mat-icon" role="img" svgicon="menu" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></mat-icon></span><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button><a class="nav-link home" href="/"><img alt="Home" height="40" src="assets/images/logos/angular/logo-nav@2x.png" title="Home" width="150" class="ng-star-inserted"></a><aio-top-menu _nghost-c5="" class="ng-star-inserted"><ul _ngcontent-c5="" role="navigation"><li _ngcontent-c5="" class="ng-star-inserted"><a _ngcontent-c5="" class="nav-link" href="features" title="特性"><span _ngcontent-c5="" class="nav-link-inner">特性</span></a></li><li _ngcontent-c5="" class="ng-star-inserted"><a _ngcontent-c5="" class="nav-link" href="docs" title="文档"><span _ngcontent-c5="" class="nav-link-inner">文档</span></a></li><li _ngcontent-c5="" class="ng-star-inserted"><a _ngcontent-c5="" class="nav-link" href="resources" title="资源"><span _ngcontent-c5="" class="nav-link-inner">资源</span></a></li><li _ngcontent-c5="" class="ng-star-inserted"><a _ngcontent-c5="" class="nav-link" href="events" title="会议"><span _ngcontent-c5="" class="nav-link-inner">会议</span></a></li><li _ngcontent-c5="" class="ng-star-inserted"><a _ngcontent-c5="" class="nav-link" href="https://blog.angular.io/" title="博客"><span _ngcontent-c5="" class="nav-link-inner">博客</span></a></li><li _ngcontent-c5="" class="ng-star-inserted"><a _ngcontent-c5="" class="nav-link" href="translations/cn/home" title="关于中文版"><span _ngcontent-c5="" class="nav-link-inner">关于中文版</span></a></li></ul></aio-top-menu><aio-search-box class="search-container"><input aria-label="search" placeholder="搜索" type="search"></aio-search-box><div class="toolbar-external-icons-container"><a aria-label="Angular on twitter" href="https://twitter.com/angular" title="Twitter"><mat-icon class="mat-icon" role="img" svgicon="logos:twitter" aria-hidden="true"><svg focusable="false" viewBox="0 0 50 59" xmlns="http://www.w3.org/2000/svg"><path d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"></path></svg></mat-icon></a><a aria-label="Angular on github" href="https://github.com/angular/angular" title="GitHub"><mat-icon class="mat-icon" role="img" svgicon="logos:github" aria-hidden="true"><svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg"><path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3C51.5,11.7,40.1,0.2,25.9,0.2z"></path></svg></mat-icon></a></div></mat-toolbar-row></mat-toolbar><mat-sidenav-container class="sidenav-container mat-drawer-container mat-sidenav-container mat-drawer-transition has-floating-toc" role="main"><div class="mat-drawer-backdrop ng-star-inserted"></div><div class="cdk-visually-hidden cdk-focus-trap-anchor"></div><mat-sidenav class="sidenav mat-drawer mat-sidenav ng-tns-c7-1 ng-trigger ng-trigger-transform mat-drawer-side ng-star-inserted" tabindex="-1" style="transform:none;visibility:visible"><div class="mat-drawer-inner-container"><aio-nav-menu><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="guide/quickstart" title="对 Angular 和 Angular CLI 基础知识的简短介绍" target="_self">快速上手</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-1 collapsed ng-star-inserted" type="button" title="此《英雄指南》教程会带你用 TypeScript 一步步创建一个 Angular 应用。" aria-pressed="false">教程<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial" title="《英雄指南》教程简介" target="_self">简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt0" title="创建应用的外壳" target="_self">应用的“外壳”</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt1" title="第一部分：构建一个简单的英雄编辑器" target="_self">1. 英雄编辑器</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt2" title="第二部分：构建一个主从结构的页面，用于展现英雄列表。" target="_self">2. 显示英雄列表</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt3" title="第三部分：把主从结构的页面重构成多个组件。" target="_self">3. 主从组件</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt4" title="第四部分：创建一个可复用的服务来管理英雄数据。" target="_self">4. 服务</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt5" title="第五部分：添加 Angular 路由器，并且学习在视图之间导航。" target="_self">5. 路由</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt6" title="第六部分：通过 HTTP 来获取并保存英雄数据。" target="_self">6. HTTP</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-1 collapsed ng-star-inserted" type="button" title="学习 Angular 的核心知识" aria-pressed="false">核心知识<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="Angular 应用的基本构造块。" aria-pressed="false">架构<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture" title="Angular 应用的基本构造块" target="_self">架构概览</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-modules" title="关于模块。" target="_self">模块（NgModule）简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-components" title="关于组件、模板和视图。" target="_self">组件简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-services" title="关于服务与依赖注入。" target="_self">服务与 DI 简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-next-steps" title="学完基础知识之后……" target="_self">后续步骤</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="使用数据绑定构建动态视图" aria-pressed="false">组件与模板<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/displaying-data" title="属性绑定可以帮助应用把数据显示在界面上" target="_self">显示数据</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-syntax" title="学习如何写模板，以便借助数据绑定机制显示数据并响应事件。" target="_self">模板语法</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/user-input" title="用户输入会触发 DOM 事件。Angular 会通过事件绑定来监听那些事件，并把修改后的值传回应用的组件和模型中。" target="_self">用户输入</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lifecycle-hooks" title="Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。" target="_self">生命周期钩子</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-interaction" title="在不同的指令和组件之间共享信息" target="_self">组件交互</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-styles" title="添加专属于某个组件的样式" target="_self">组件样式</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/elements" title="把组件转换成自定义元素。" target="_self">Angular 自定义元素</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-component-loader" title="动态加载组件" target="_self">动态组件</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/attribute-directives" title="属性型指令把行为添加到现有元素上。" target="_self">属性型指令</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/structural-directives" title="结构型指令可以操纵页面的布局" target="_self">结构型指令</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/pipes" title="管道可以在模板中转换显示的内容。" target="_self">管道</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="Angular 的表单" aria-pressed="false">表单<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms-overview" title="表单可以创建集中、高效、引人注目的输入体验。Angular 表单可以协调一组数据绑定控件，跟踪变更，验证输入，并表达错误信息。" target="_self">简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reactive-forms" title="使用 FormBuilder、表单组和表单数组创建响应式表单。" target="_self">响应式表单</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms" title="使用指令和 Angular 模板语法创建模板驱动表单。" target="_self">模板驱动表单</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/form-validation" title="验证用户的表单输入" target="_self">表单验证</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-form" title="使用 FormGroup 渲染动态表单。" target="_self">动态表单</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="Observable 与 RxJS" aria-pressed="false">Observable 与 RxJS<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables" title="" target="_self">可观察对象(Observable)</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/rx-library" title="" target="_self">RxJS 库</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables-in-angular" title="" target="_self">Angular 中的可观察对象</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/practical-observable-usage" title="" target="_self">用法实战</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/comparing-observables" title="" target="_self">与其它技术的比较</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/bootstrapping" title="在应用的根模块（AppModule）中告诉 Angular 如何构造并引导引用。" target="_self">引导启动</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="Angular 中的模块" aria-pressed="false">NgModule<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodules" title="使用 NgModule 让你的应用更高效" target="_self">NgModule 简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-vs-jsmodule" title="JavaScript 模块和 NgModule 之间的差异" target="_self">JS 模块 vs NgModule</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/frequent-ngmodules" title="介绍最常用的 NgModule" target="_self">常用模块</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/module-types" title="介绍特性模块的几种类型" target="_self">特性模块的分类</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/entry-components" title="关于 Angular 中入口组件的一切" target="_self">入口组件</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/feature-modules" title="创建特性模块，以组织你的代码" target="_self">特性模块</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/providers" title="服务提供商与 NgModule" target="_self">服务提供商</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/singleton-services" title="创建单例服务" target="_self">单例服务</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lazy-loading-ngmodules" title="惰性加载模块，以提高应用的性能" target="_self">惰性加载的特性模块</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/sharing-ngmodules" title="共享 NgModule 让你的应用现代化。" target="_self">共享 NgModule</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-api" title="理解 NgModule 的那些细节。" target="_self">NgModule API</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-faq" title="回答关于 NgModules 的常见问题。" target="_self">NgModule 常见问题</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="依赖注入：创建并注入各种服务。" aria-pressed="false">依赖注入<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection" title="Angular 的依赖注入系统能够为 Angular 创建的类创建并交付它们所依赖的服务。" target="_self">Angular 依赖注入</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/hierarchical-dependency-injection" title="与组件树平行的注入器树，并支持嵌套的依赖。" target="_self">多级注入器</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-providers" title="各种提供商类型的更多知识。" target="_self">DI 提供商</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-in-action" title="依赖注入的使用技巧" target="_self">DI 实战</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-navtree" title="使用注入器树来查找父组件。" target="_self">浏览组件树</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/http" title="通过 HTTP 协议与远程服务器对话。" target="_self">HttpClient</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/router" title="揭示如何通过 Angular 路由进行基本的屏幕导航。" target="_self">路由与导航</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="Angular 动画系统指南" aria-pressed="false">动画<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/animations" title="Angular 动画的基础技术。" target="_self">简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/transition-and-triggers" title="转场与触发器的高级技术。" target="_self">转场与触发器</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/complex-animation-sequences" title="复杂的 Angular 动画序列。" target="_self">复杂序列</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reusable-animations" title="创建可复用的动画。" target="_self">可复用动画</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/route-animations" title="为路由提供转场动画。" target="_self">路由转场动画</a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-1 expanded selected ng-star-inserted" type="button" title="把 Angular 用到你的实际工作中的一些技巧" aria-pressed="true">其它技术<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/security" title="Angular 应用开发中的安全技术。" target="_self">安全</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 expanded selected ng-star-inserted" style="position:relative" href="guide/i18n" title="把应用模板中的文本翻译成多种语言。" target="_self">国际化 (i18n)</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="Angular Service Worker: 控制应用资源的缓存。" aria-pressed="false">Service Worker 与 PWA<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-intro" title="Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。" target="_self">简介</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-getting-started" title="在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。" target="_self">快速起步</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-communications" title="那些能让你和 Angular 的 Service Worker 通讯的服务类。" target="_self">与 Service Worker 通讯</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-devops" title="使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。" target="_self">生产环境下的 Service Worker</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-config" title="配置 Service Worker 的缓存行为。" target="_self">Service Worker 配置</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/universal" title="使用 Angular Universal 在服务端渲染 HTML。" target="_self">服务端渲染</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="把 AngularJS 应用增量式的升级到 Angular。" aria-pressed="false">从 AngularJS 升级<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade" title="把 AngularJS 应用增量式的升级到 Angular。" target="_self">升级步骤</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade-performance" title="用更灵活的方式把 AngularJS 升级到 Angular" target="_self">更关注性能的升级方式</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ajs-quick-reference" title="学习如何把 AngularJS 的概念映射到 Angular 中。" target="_self">AngularJS 与 Angular 的概念对照</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="使用共享库扩展 Angular" aria-pressed="false">Angular 库开发<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/libraries" title="理解何时以及如何使用和创建库。" target="_self">库概览</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/using-libraries" title="把已发布的库集成进你的应用中。" target="_self">使用已发布的库</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/creating-libraries" title="通过创建、发布和使用你自己的库来扩展 Angular" target="_self">创建库</a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-1 collapsed ng-star-inserted" type="button" title="关于环境搭建、构建、测试、部署环境与工具的信息。" aria-pressed="false">环境搭建与部署<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/file-structure" title="Angular 工作区在文件系统中是怎样的。" target="_self">项目文件结构</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/workspace-config" title="&quot;angular.json&quot; 包含供 CLI 命令使用的工作区和项目默认配置。" target="_self">工作区配置</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/npm-packages" title="开发期间和运行期间所需的 npm 包的说明。" target="_self">npm 包</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/typescript-configuration" title="给 Angular 开发者的 TypeScript 配置。" target="_self">TypeScript 配置</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/aot-compiler" title="了解为何以及如何使用预先（AOT）编译器。" target="_self">预先（AOT）编译</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/build" title="构建应用及为应用启动开发服务器。" target="_self">构建与运行</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/testing" title="测试 Angular 应用的技巧与实践。" target="_self">测试</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deployment" title="了解如何部署 Angular 应用。" target="_self">发布</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/browser-support" title="浏览器支持与腻子脚本指南。" target="_self">浏览器支持</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-2 collapsed ng-star-inserted" type="button" title="整合开发环境和工具。" aria-pressed="false">开发工具集成<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/language-service" title="使用 Angular 语言服务加速开发。" target="_self">语言服务</a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-1 collapsed ng-star-inserted" type="button" title="Angular 的版本发布实践、更新与升级。" aria-pressed="false">发布信息<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating" title="如何把 Angular 应用和库升级到最新版本。" target="_self">保持最新</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/releases" title="Angular 的版本、发布、支持、弃用策略与实践。" target="_self">Angular 发布策略与实践</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-1 collapsed ng-star-inserted" type="button" title="Angular 语法、编码、术语汇总。" aria-pressed="false">快捷手册<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cheatsheet" title="关于 Angular 常用编码技术的快速指南。" target="_self">速查表</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/styleguide" title="写出 Angular 风格的程序" target="_self">风格指南</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/glossary" title="Angular 中最重要的词汇的简要定义。" target="_self">词汇表</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button class="vertical-menu-item heading level-1 collapsed ng-star-inserted" type="button" title="Angular CLI 命令参考手册。" aria-pressed="false">CLI 命令<mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli" title="CLI 工具介绍、命令、语法" target="_self">概览</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/add" title="ng add." target="_self">ng add</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/build" title="ng build." target="_self">ng build</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/config" title="ng config." target="_self">ng config</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/doc" title="ng doc." target="_self">ng doc</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/e2e" title="ng e2e." target="_self">ng e2e</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/generate" title="ng generate." target="_self">ng generate</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/help" title="ng help." target="_self">ng help</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/lint" title="ng lint." target="_self">ng lint</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/new" title="ng new." target="_self">ng new</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/run" title="ng run." target="_self">ng run</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/serve" title="ng serve." target="_self">ng serve</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/test" title="ng test." target="_self">ng test</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/update" title="ng update." target="_self">ng update</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/version" title="ng version." target="_self">ng version</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/xi18n" title="ng xi18n." target="_self">ng xi18n</a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="api" title="关于 Angular 中类和值的详细信息。" target="_self">API 参考手册</a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><div class="mat-divider ng-star-inserted" style="margin:4px 20px;border-top:1px solid #d3d3d3"></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng-china.org" title="2018 ngChina 开发者大会" target="_blank">2018 ngChina @ 杭州<mat-icon class="mat-icon material-icons ng-star-inserted" role="img" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://github.com/ng-docs/ng-docs.github.io/issues" title="github 上的中文互助问答区" target="_blank">互助问答<mat-icon class="mat-icon material-icons ng-star-inserted" role="img" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://material.angular.cn" title="Angular Material 组件库的中文文档" target="_blank">官方 Material 组件库<mat-icon class="mat-icon material-icons ng-star-inserted" role="img" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.ant.design/" title="Ant Design 的 Angular 实现，服务于企业级后台产品。" target="_blank">ng-zorro 组件库<mat-icon class="mat-icon material-icons ng-star-inserted" role="img" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.mobile.ant.design/" title="Ant Design Mobile 的 Angular 实现，服务于无线产品。" target="_blank">ng-zorro mobile 组件库<mat-icon class="mat-icon material-icons ng-star-inserted" role="img" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item></aio-nav-menu><div class="doc-version"><aio-select><div class="form-select-menu"><button class="form-select-button"><strong></strong>stable (v8.0.0-beta.4)</button></div></aio-select></div></div></mat-sidenav><div class="cdk-visually-hidden cdk-focus-trap-anchor"></div><mat-sidenav-content cdkscrollable="" class="mat-drawer-content mat-sidenav-content ng-star-inserted" style="margin-left:260px"><main class="sidenav-content" role="main" id="guide-i18n"><aio-mode-banner></aio-mode-banner><aio-doc-viewer class=""><div style="opacity:1"><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/aio/content/guide/i18n.md?message=docs%3A%20请简述你的修改..." aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a></div><div class="content"><h1 id="internationalization-i18n" translation-result="on">国际化（i18n）<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#internationalization-i18n"><i class="material-icons">link</i></a></h1><aio-toc class="embedded" ng-version="7.0.0"><div class="toc-inner no-print collapsed ng-star-inserted"><button aria-label="Expand/collapse contents" class="toc-heading embedded secondary ng-star-inserted" title="Expand/collapse contents" type="button" aria-pressed="false">目录<mat-icon class="rotating-icon mat-icon collapsed" role="img" svgicon="keyboard_arrow_right" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><ul class="toc-list embedded"><li title="Angular 与 i18nlink" class="h2 ng-star-inserted"><a href="guide/i18n#angular-and-i18n">Angular 与 i18n</a></li><li title="为你的应用设置地区（locale）link" class="h2 ng-star-inserted"><a href="guide/i18n#setting-up-the-locale-of-your-app">为你的应用设置地区（locale）</a></li><li title="i18n 管道link" class="h2 ng-star-inserted"><a href="guide/i18n#i18n-pipes">i18n 管道</a></li><li title="模板翻译link" class="h2 secondary ng-star-inserted"><a href="guide/i18n#template-translations">模板翻译</a></li><li title="使用 i18n 属性标记文本link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#mark-text-with-the-i18n-attribute">使用 <code>i18n</code> 属性标记文本</a></li><li title="用描述和意图来帮助翻译人员link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#help-the-translator-with-a-description-and-meaning">用描述和意图来帮助翻译人员</a></li><li title="设置一个自定义的 id 来提升可搜索性和可维护性link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#set-a-custom-id-for-persistence-and-maintenance">设置一个自定义的 <code>id</code> 来提升可搜索性和可维护性</a></li><li title="翻译文本，而不必创建元素link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#translate-text-without-creating-an-element">翻译文本，而不必创建元素</a></li><li title="翻译属性link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#translate-attributes">翻译属性</a></li><li title="复数与选择的表达式link" class="h2 secondary ng-star-inserted"><a href="guide/i18n#regular-expressions-for-plurals-and-selections">复数与选择的表达式</a></li><li title="复数规则link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#pluralization">复数规则</a></li><li title="在候选文本中选择link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#select-among-alternative-text-messages">在候选文本中选择</a></li><li title="把&quot;复数&quot;与&quot;选择&quot;表达式嵌套在一起link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#nesting-plural-and-select-icu-expressions">把"复数"与"选择"表达式嵌套在一起</a></li><li title="创建翻译源文件link" class="h2 secondary ng-star-inserted"><a href="guide/i18n#create-a-translation-source-file">创建翻译源文件</a></li><li title="输出选项link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#output-options">输出选项</a></li><li title="翻译源文本link" class="h2 secondary ng-star-inserted"><a href="guide/i18n#translate-the-source-text">翻译源文本</a></li><li title="新建一个本土化目录link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#create-a-localization-folder">新建一个本土化目录</a></li><li title="创建翻译文件link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#create-the-translation-files">创建翻译文件</a></li><li title="翻译文本节点link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#translate-text-nodes">翻译文本节点</a></li><li title="翻译复数（plural）和选择（select）表达式link" class="h2 secondary ng-star-inserted"><a href="guide/i18n#translating-plural-and-select-expressions">翻译复数（plural）和选择（select）表达式</a></li><li title="翻译复数link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#translate-plural">翻译<em>复数</em></a></li><li title="翻译选择（select）link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#translate-select">翻译<em>选择</em>（select）</a></li><li title="翻译嵌套的表达式link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#translate-a-nested-expression">翻译嵌套的表达式</a></li><li title="应用及其翻译文件link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#the-app-and-its-translation-file">应用及其翻译文件</a></li><li title="合并已经翻译的文件link" class="h2 secondary ng-star-inserted"><a href="guide/i18n#merge-the-completed-translation-file-into-the-app">合并已经翻译的文件</a></li><li title="使用 AOT 编译器合并link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#merge-with-the-aot-compiler">使用 AOT 编译器合并</a></li><li title="用 JIT 编译器合并link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#merge-with-the-jit-compiler">用 JIT 编译器合并</a></li><li title="汇报缺失的翻译link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#report-missing-translations">汇报缺失的翻译</a></li><li title="为多种语言环境构建link" class="h3 secondary ng-star-inserted"><a href="guide/i18n#build-for-multiple-locales">为多种语言环境构建</a></li></ul><button aria-label="Expand/collapse contents" class="toc-more-items embedded material-icons collapsed ng-star-inserted" title="Expand/collapse contents" type="button" aria-pressed="false"></button></div></aio-toc><h1 translation-origin="off" id="internationalization-i18n">Internationalization (i18n)<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#internationalization-i18n"><i class="material-icons">link</i></a></h1><p translation-result="on">应用程序的国际化涉及到开发的很多方面，主要是如何让应用可以被全世界的用户使用而且用起来比较友好。 本页面讲的是 Angular 的<em>国际化</em>（<em>i18n</em>）工具，它可以帮助你使用多个语言发布应用。</p><p translation-origin="off">Application internationalization is a many-faceted area of development, focused on making applications available and user-friendly to a worldwide audience. This page describes Angular's internationalization (i18n) tools, which can help you make your app available in multiple languages.</p><p translation-result="on">可以把这个翻译为法语版的 AOT 应用<live-example downloadonly="" name="i18n" ng-version="7.0.0"><span style="display:none">i18n 例子</span><span><span class="ng-star-inserted"><a download="" href="generated/zips/i18n/i18n.zip" title="i18n 例子">i18n 例子</a></span></span></live-example>作为一个简单的例子。</p><p translation-origin="off">See the<live-example downloadonly="" name="i18n" ng-version="7.0.0"><span style="display:none">i18n Example</span><span><span class="ng-star-inserted"><a download="" href="generated/zips/i18n/i18n.zip" title="i18n Example">i18n Example</a></span></span></live-example>for a simple example of an AOT-compiled app, translated into French.</p><a id="angular-i18n"></a><h2 id="angular-and-i18n" translation-result="on">Angular 与 i18n<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#angular-and-i18n"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="angular-and-i18n">Angular and i18n<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#angular-and-i18n"><i class="material-icons">link</i></a></h2><p translation-result="on"><em>国际化</em>是一个设计和准备应用程序的过程，使其能用于不同的语言。 <em>本地化</em>是一个把国际化的应用针对部分区域翻译成特定语言的过程。</p><p translation-origin="off"><em>Internationalization</em> is the process of designing and preparing your app to be usable in different languages. <em>Localization</em> is the process of translating your internationalized app into specific languages for particular locales.</p><p translation-result="on">Angular 简化了国际化工作的下列几个方面：</p><p translation-origin="off">Angular simplifies the following aspects of internationalization:</p><ul><li><p translation-result="on">用本地格式显示日期、数字、百分比以及货币。</p><p translation-origin="off">Displaying dates, number, percentages, and currencies in a local format.</p></li><li><p translation-result="on">准备组件模板中待翻译的文本。</p><p translation-origin="off">Preparing text in component templates for translation.</p></li><li><p translation-result="on">处理单词的复数形式。</p><p translation-origin="off">Handling plural forms of words.</p></li><li><p translation-result="on">处理候选文本。</p><p translation-origin="off">Handling alternative text.</p></li></ul><p translation-result="on">为了进行本地化，你可以使用 <a href="cli">Angular CLI</a> 来生成大部分必要的代码，用与创建要发给翻译人员的文件以及把应用发布成多种语言。 如果要为你的应用添加 i18n 支持，CLI 会在下列步骤中给你提供帮助：</p><p translation-origin="off">For localization, you can use the <a href="cli">Angular CLI</a> to generate most of the boilerplate necessary to create files for translators, and to publish your app in multiple languages. After you have set up your app to use i18n, the CLI can help you with the following steps:</p><ul><li><p translation-result="on">把本地化文本提取到一个文件中，你可以把它发给别人进行翻译。</p><p translation-origin="off">Extracting localizable text into a file that you can send out to be translated.</p></li><li><p translation-result="on">使用翻译好的文本，为指定的区域构建应用和启动开发服务器。</p><p translation-origin="off">Building and serving the app for a given locale, using the translated text.</p></li><li><p translation-result="on">为你的应用创建多语言版本。</p><p translation-origin="off">Creating multiple language versions of your app.</p></li></ul><a id="setting-up-locale"></a><h2 id="setting-up-the-locale-of-your-app" translation-result="on">为你的应用设置地区（locale）<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#setting-up-the-locale-of-your-app"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="setting-up-the-locale-of-your-app">Setting up the locale of your app<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#setting-up-the-locale-of-your-app"><i class="material-icons">link</i></a></h2><p translation-result="on">地区是一个唯一性标识，它代表的是世界某个区域（比如国家）中共享的一组用户首选项。本文档中提到的“地区”就是指这个地区标识。</p><p translation-origin="off">A locale is an identifier (id) that refers to a set of user preferences that tend to be shared within a region of the world, such as country. This document refers to a locale identifier as a "locale" or "locale id".</p><p translation-result="on">Unicode 的地区标识是由 Unicode 语言标识、一个可选的 <code>-</code> 字符，后跟一个地区扩展项组合而成的。（由于历史的原因，还支持用 <code>_</code> 作为 <code>-</code> 的替代品。）比如，地区标识 <code>fr-CA</code> 中的 <code>fr</code> 代表法语的语言标识，而 <code>CA</code> 代表的是加拿大的语言扩展。</p><p translation-origin="off">A Unicode locale identifier is composed of a Unicode language identifier and (optionally) the character <code>-</code> followed by a locale extension. (For historical reasons the character <code>_</code> is supported as an alternative to <code>-</code>.) For example, in the locale id <code>fr-CA</code> the <code>fr</code> refers to the French language identifier, and the <code>CA</code> refers to the locale extension Canada.</p><div class="alert is-critical"><p translation-result="on">Angular 遵循 Unicode 的 LDML 惯例，它使用基于 <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">BCP47</a> 标准的稳定标识（Unicode 的地区标识）。当你要定义自己的地区时，遵循这个惯例非常重要，因为 Angular 的 i18n 工具会使用这种地区标识来查找相应的本地化数据。</p><p translation-origin="off">Angular follows the Unicode LDML convention that uses stable identifiers (Unicode locale identifiers) based on the norm <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">BCP47</a>. It is very important that you follow this convention when you define your locale, because the Angular i18n tools use this locale id to find the correct corresponding locale data.</p></div><p translation-result="on">默认情况下，Angular 使用的地区标识是 <code>en-US</code>，它表示美国英语。</p><p translation-origin="off">By default, Angular uses the locale <code>en-US</code>, which is English as spoken in the United States of America.</p><p translation-result="on">要把你的应用的地区改为其它值，可以使用 CLI 参数 <code>--configuration</code> 来传入你要使用的地区标识：</p><p translation-origin="off">To set your app's locale to another value, use the CLI parameter <code>--configuration</code> with the value of the locale id that you want to use:</p><code-example language="sh" class="code-shell" ng-version="7.0.0"><div style="display:none">ng serve --configuration=fr</div><aio-code><pre class="prettyprint lang-sh">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng serve </span><span class="pun">--</span><span class="pln">configuration</span><span class="pun">=</span><span class="pln">fr</span></code>
    </pre></aio-code></code-example><p translation-result="on">如果要使用 JIT，你就得在你的主模块中定义 <code><a href="api/core/LOCALE_ID" class="code-anchor">LOCALE_ID</a></code> 这个服务提供商：</p><p translation-origin="off">If you use JIT, you also need to define the <code><a href="api/core/LOCALE_ID" class="code-anchor">LOCALE_ID</a></code> provider in your main module:</p><code-example path="i18n/doc-files/app.module.ts" header="src/app/app.module.ts" linenums="false" ng-version="7.0.0"><div style="display:none">import { <a href="api/core/LOCALE_ID" class="code-anchor">LOCALE_ID</a>, <a href="api/core/NgModule" class="code-anchor">NgModule</a> } from '@angular/core'; import { <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> } from '@angular/platform-browser'; import { AppComponent } from '../src/app/app.component'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ <a href="api/core/NgModule#imports" class="code-anchor">imports</a>: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> ], <a href="api/core/NgModule#declarations" class="code-anchor">declarations</a>: [ AppComponent ], providers: [ { provide: <a href="api/core/LOCALE_ID" class="code-anchor">LOCALE_ID</a>, useValue: 'fr' } ], <a href="api/core/NgModule#bootstrap" class="code-anchor">bootstrap</a>: [ AppComponent ] }) export class AppModule { }</div><header class="ng-star-inserted">src/app/app.module.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/LOCALE_ID" class="code-anchor"><span class="pln">LOCALE_ID</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/NgModule" class="code-anchor"><span class="typ">NgModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../src/app/app.component'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  </span><a href="api/core/NgModule#imports" class="code-anchor"><span class="pln">imports</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pln"> </span><span class="pun">],</span><span class="pln">
  </span><a href="api/core/NgModule#declarations" class="code-anchor"><span class="pln">declarations</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">],</span><span class="pln">
  providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> provide</span><span class="pun">:</span><span class="pln"> </span><a href="api/core/LOCALE_ID" class="code-anchor"><span class="pln">LOCALE_ID</span></a><span class="pun">,</span><span class="pln"> useValue</span><span class="pun">:</span><span class="pln"> </span><span class="str">'fr'</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">],</span><span class="pln">
  </span><a href="api/core/NgModule#bootstrap" class="code-anchor"><span class="pln">bootstrap</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">要了解关于 Unicode 地区标识的更多信息，参见 <a href="http://cldr.unicode.org/core-spec#Unicode_Language_and_Locale_Identifiers">CLDR 核心规范</a>。</p><p translation-origin="off">For more information about Unicode locale identifiers, see the <a href="http://cldr.unicode.org/core-spec#Unicode_Language_and_Locale_Identifiers">CLDR core spec</a>.</p><p translation-result="on">要查看 Angular 支持的地区总表，参见 <a href="https://github.com/angular/angular/tree/master/packages/common/locales">Angular 源码仓库</a>。</p><p translation-origin="off">For a complete list of locales supported by Angular, see <a href="https://github.com/angular/angular/tree/master/packages/common/locales">the Angular repository</a>.</p><p translation-result="on">CLDR 和 Angular 使用的地区标识基于 <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">BCP47</a>。 这些规范可能会随时间而变化，下表中是本文编写时地区标识的新旧版本对照表：</p><p translation-origin="off">The locale identifiers used by CLDR and Angular are based on <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">BCP47</a>. These specifications change over time; the following table maps previous identifiers to current ones at time of writing:</p><table><thead><tr><th><p translation-result="on">地区名称</p><p translation-origin="off">Locale name</p></th><th><p translation-result="on">旧 ID</p><p translation-origin="off">Old locale id</p></th><th><p translation-result="on">新 ID</p><p translation-origin="off">New locale id</p></th></tr></thead><tbody><tr><td><p translation-result="on">印度尼西亚</p><p translation-origin="off">Indonesian</p></td><td>in</td><td>id</td></tr><tr><td><p translation-result="on">希伯来</p><p translation-origin="off">Hebrew</p></td><td>iw</td><td>he</td></tr><tr><td><p translation-result="on">罗马尼亚摩尔多瓦</p><p translation-origin="off">Romanian Moldova</p></td><td>mo</td><td>ro-MD</td></tr><tr><td><p translation-result="on">挪威 Bokmål</p><p translation-origin="off">Norwegian Bokmål</p></td><td>no, no-NO</td><td>nb</td></tr><tr><td><p translation-result="on">塞尔维亚拉丁语</p><p translation-origin="off">Serbian Latin</p></td><td>sh</td><td>sr-Latn</td></tr><tr><td><p translation-result="on">菲律宾</p><p translation-origin="off">Filipino</p></td><td>tl</td><td>fil</td></tr><tr><td><p translation-result="on">葡萄牙巴西</p><p translation-origin="off">Portuguese Brazil</p></td><td>pt-BR</td><td>pt</td></tr><tr><td><p translation-result="on">中文简体</p><p translation-origin="off">Chinese Simplified</p></td><td>zh-cn, zh-Hans-CN</td><td>zh-Hans</td></tr><tr><td><p translation-result="on">中文繁体</p><p translation-origin="off">Chinese Traditional</p></td><td>zh-tw, zh-Hant-TW</td><td>zh-Hant</td></tr><tr><td><p translation-result="on">中文繁体（香港）</p><p translation-origin="off">Chinese Traditional Hong Kong</p></td><td>zh-hk</td><td>zh-Hant-HK</td></tr></tbody></table><h2 id="i18n-pipes" translation-result="on">i18n 管道<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#i18n-pipes"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="i18n-pipes">i18n pipes<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#i18n-pipes"><i class="material-icons">link</i></a></h2><p translation-result="on">Angular 的管道可以帮助你进行国际化：<code><a href="api/common/DatePipe" class="code-anchor">DatePipe</a></code>、<code><a href="api/common/CurrencyPipe" class="code-anchor">CurrencyPipe</a></code>、<code><a href="api/common/DecimalPipe" class="code-anchor">DecimalPipe</a></code> 和 <code><a href="api/common/PercentPipe" class="code-anchor">PercentPipe</a></code> 都使用本地化数据来根据 <code><a href="api/core/LOCALE_ID" class="code-anchor">LOCALE_ID</a></code> 格式化数据。</p><p translation-origin="off">Angular pipes can help you with internationalization: the <code><a href="api/common/DatePipe" class="code-anchor">DatePipe</a></code>, <code><a href="api/common/CurrencyPipe" class="code-anchor">CurrencyPipe</a></code>, <code><a href="api/common/DecimalPipe" class="code-anchor">DecimalPipe</a></code> and <code><a href="api/common/PercentPipe" class="code-anchor">PercentPipe</a></code> use locale data to format data based on the <code><a href="api/core/LOCALE_ID" class="code-anchor">LOCALE_ID</a></code>.</p><p translation-result="on">默认情况下，Angular 只包含 <code>en-US</code> 的本地化数据。如果你要把 <code><a href="api/core/LOCALE_ID" class="code-anchor">LOCALE_ID</a></code> 的值设置为其它地区，就必须为那个新地区导入本地化数据。 当你使用 <code>ng serve</code> 和 <code>ng build</code> 的 <code>--configuration</code> 参数时，CLI 会自动帮你导入相应的本地化数据。</p><p translation-origin="off">By default, Angular only contains locale data for <code>en-US</code>. If you set the value of <code><a href="api/core/LOCALE_ID" class="code-anchor">LOCALE_ID</a></code> to another locale, you must import locale data for that new locale. The CLI imports the locale data for you when you use the parameter <code>--configuration</code> with <code>ng serve</code> and <code>ng build</code>.</p><p translation-result="on">如果还要为其它语言导入本地化数据，你可以手工完成它：</p><p translation-origin="off">If you want to import locale data for other languages, you can do it manually:</p><code-example path="i18n/doc-files/app.locale_data.ts" region="import-locale" header="src/app/app.module.ts" linenums="false" ng-version="7.0.0"><div style="display:none">import { <a href="api/common/registerLocaleData" class="code-anchor">registerLocaleData</a> } from '@angular/common'; import localeFr from '@angular/common/locales/fr'; // the second parameter 'fr' is <a href="api/animations/AnimationQueryOptions#optional" class="code-anchor">optional</a> <a href="api/common/registerLocaleData" class="code-anchor">registerLocaleData</a>(localeFr, 'fr');</div><header class="ng-star-inserted">src/app/app.module.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/registerLocaleData" class="code-anchor"><span class="pln">registerLocaleData</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> localeFr </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common/locales/fr'</span><span class="pun">;</span><span class="pln">

</span><span class="com">// the second parameter 'fr' is </span><a href="api/animations/AnimationQueryOptions#optional" class="code-anchor"><span class="com">optional</span></a><span class="pln">
</span><a href="api/common/registerLocaleData" class="code-anchor"><span class="pln">registerLocaleData</span></a><span class="pun">(</span><span class="pln">localeFr</span><span class="pun">,</span><span class="pln"> </span><span class="str">'fr'</span><span class="pun">);</span></code>
    </pre></aio-code></code-example><p translation-result="on">第一个参数是一个包含从 <code>@angular/common/locales</code> 中导入的本地化数据的对象。 默认情况下，导入 Angular 自带的本地化数据时会使用数据中自带的一个地区标识进行注册。 如果你要使用其它地区标识来注册这个导入的本地化数据，可以在第二个参数中指定一个自定义的地区标识。 比如，Angular 为法语定义的地区标识是 “fr”，你可以通过第二个参数为这些导入的法语本地化数据指定一个自定义的地区标识 “fr-FR”。</p><p translation-origin="off">The first parameter is an object containing the locale data imported from <code>@angular/common/locales</code>. By default, the imported locale data is registered with the locale id that is defined in the Angular locale data itself. If you want to register the imported locale data with another locale id, use the second parameter to specify a custom locale id. For example, Angular's locale data defines the locale id for French as "fr". You can use the second parameter to associate the imported French locale data with the custom locale id "fr-FR" instead of "fr".</p><p translation-result="on"><code>@angular/common/locales</code> 中的文件包含你需要的大多数本地化数据， 不过有些高级的格式选项只存在于从 <code>@angular/common/locales/extra</code> 中导入的扩展数据集中。遇到这种情况，你就会收到一条错误信息。</p><p translation-origin="off">The files in <code>@angular/common/locales</code> contain most of the locale data that you need, but some advanced formatting options might only be available in the extra dataset that you can import from <code>@angular/common/locales/extra</code>. An error message informs you when this is the case.</p><code-example path="i18n/doc-files/app.locale_data_extra.ts" region="import-locale-extra" header="src/app/app.module.ts" linenums="false" ng-version="7.0.0"><div style="display:none">import { <a href="api/common/registerLocaleData" class="code-anchor">registerLocaleData</a> } from '@angular/common'; import localeFr from '@angular/common/locales/fr'; import localeFrExtra from '@angular/common/locales/extra/fr'; <a href="api/common/registerLocaleData" class="code-anchor">registerLocaleData</a>(localeFr, 'fr-FR', localeFrExtra);</div><header class="ng-star-inserted">src/app/app.module.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/registerLocaleData" class="code-anchor"><span class="pln">registerLocaleData</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> localeFr </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common/locales/fr'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> localeFrExtra </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common/locales/extra/fr'</span><span class="pun">;</span><span class="pln">

</span><a href="api/common/registerLocaleData" class="code-anchor"><span class="pln">registerLocaleData</span></a><span class="pun">(</span><span class="pln">localeFr</span><span class="pun">,</span><span class="pln"> </span><span class="str">'fr-FR'</span><span class="pun">,</span><span class="pln"> localeFrExtra</span><span class="pun">);</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on">Angular 中使用的所有本地化数据都是从 Unicode 联盟的<a href="http://cldr.unicode.org/" title="CLDR">常用本地化数据仓库 (CLDR)</a> 中提取的。</p><p translation-origin="off">All locale data used by Angular are extracted from the Unicode Consortium's <a href="http://cldr.unicode.org/" title="CLDR">Common Locale Data Repository (CLDR)</a>.</p></div><h2 id="template-translations" translation-result="on">模板翻译<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#template-translations"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="template-translations">Template translations<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#template-translations"><i class="material-icons">link</i></a></h2><div class="alert is-helpful"><p translation-result="on">本文档中会把翻译文本的最小单元称为“文本”、“消息”或“文本消息”。</p><p translation-origin="off">This document refers to a unit of translatable text as "text," a "message", or a "text message."</p></div><p translation-result="on">i18n 模板的翻译过程分为四个阶段</p><p translation-origin="off">The i18n template translation process has four phases:</p><ol><li><p translation-result="on">在组件模板中标记需要翻译的静态文本信息。</p><p translation-origin="off">Mark static text messages in your component templates for translation.</p></li><li><p translation-result="on">创建翻译文件：使用 Angular CLI 的 <code>xi18n</code> 命令，把标记过的文本提取到一个符合行业标准的翻译源文件中。</p><p translation-origin="off">Create a translation file: Use the Angular CLI <code>xi18n</code> command to extract the marked text into an industry-standard translation source file.</p></li><li><p translation-result="on">编辑所生成的翻译文件：把提取出的文本翻译成目标语言。</p><p translation-origin="off">Edit the generated translation file: Translate the extracted text into the target language.</p></li><li><p translation-result="on">把翻译完成的文件合并回应用。要做到这一点，请使用 Angular CLI 的 <code>build</code> 命令来编译此应用，选择一个<a href="guide/i18n#merge-aot">区域相关的配置</a>，或指定下列命令选项。</p><p translation-origin="off">Merge the completed translation file into the app. To do this, use the Angular CLI <code>build</code> command to compile the app, choosing a <a href="guide/i18n#merge-aot">locale-specific configuration</a>, or specifying the following command options.</p><ul><li><p translation-result="on"><code>--i18nFile</code>=<em>指向翻译文件的路径</em></p><p translation-origin="off"><code>--i18nFile</code>=<em>path to the translation file</em></p></li><li><p translation-result="on"><code>--i18nFormat</code>=<em>此翻译文件的格式</em></p><p translation-origin="off"><code>--i18nFormat</code>=<em>format of the translation file</em></p></li><li><p translation-result="on"><code>--i18nLocale</code>=<em>地区 ID</em></p><p translation-origin="off"><code>--i18nLocale</code>= <em>locale id</em></p></li></ul></li></ol><p translation-result="on">该命令会使用翻译的文本替换原始信息，并生成新的目标语言版本的应用程序。</p><p translation-origin="off">The command replaces the original messages with translated text, and generates a new version of the app in the target language.</p><p translation-result="on">你可以为每种支持的语言构建和部署单独的应用程序版本。</p><p translation-origin="off">You need to build and deploy a separate version of the app for each supported language.</p><a id="i18n-attribute"></a><h3 id="mark-text-with-the-i18n-attribute" translation-result="on">使用 <code>i18n</code> 属性标记文本<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#mark-text-with-the-i18n-attribute"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="mark-text-with-the-i18n-attribute">Mark text with the i18n attribute<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#mark-text-with-the-i18n-attribute"><i class="material-icons">link</i></a></h3><p translation-result="on">Angular的<code>i18n</code>属性是可翻译内容的标记。 将它放到每个固定文本需要翻译的元素标签中。</p><p translation-origin="off">The Angular <code>i18n</code> attribute marks translatable content. Place it on every element tag whose fixed text is to be translated.</p><p translation-result="on">在下面的例子中，<code>&lt;h1&gt;</code>标签显示了一句简单的英文问候语，“Hello i18n!”</p><p translation-origin="off">In the example below, an <code>&lt;h1&gt;</code> tag displays a simple English language greeting, "Hello i18n!"</p><code-example path="i18n/doc-files/app.component.html" region="greeting" header="src/app/app.component.html" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;h1&gt;Hello i18n!&lt;/h1&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h1&gt;</span><span class="pln">Hello i18n!</span><span class="tag">&lt;/h1&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">要想把它标记为需要翻译的文本，就给 <code>&lt;h1&gt;</code> 标签添加上 <code>i18n</code> 属性。</p><p translation-origin="off">To mark the greeting for translation, add the <code>i18n</code> attribute to the <code>&lt;h1&gt;</code> tag.</p><code-example path="i18n/doc-files/app.component.html" region="i18n-attribute" header="src/app/app.component.html" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;h1 i18n&gt;Hello i18n!&lt;/h1&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h1</span><span class="pln"> </span><span class="atn">i18n</span><span class="tag">&gt;</span><span class="pln">Hello i18n!</span><span class="tag">&lt;/h1&gt;</span></code>
    </pre></aio-code></code-example><div class="alert is-helpful"><p translation-result="on"> <code>i18n</code> 是一个自定义属性，会被 Angular 工具和编译器识别。 翻译之后，编译器就会移除它。它不是 Angular 指令。</p><p translation-origin="off"> <code>i18n</code> is a custom attribute, recognized by Angular tools and compilers. After translation, the compiler removes it. It is not an Angular directive.</p></div><a id="help-translator"></a><h3 id="help-the-translator-with-a-description-and-meaning" translation-result="on">用描述和意图来帮助翻译人员<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#help-the-translator-with-a-description-and-meaning"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="help-the-translator-with-a-description-and-meaning">Help the translator with a description and meaning<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#help-the-translator-with-a-description-and-meaning"><i class="material-icons">link</i></a></h3><p translation-result="on">要想翻译的更准确，翻译人员可能需要待翻译文本的额外信息或上下文。</p><p translation-origin="off">To translate a text message accurately, the translator may need additional information or context.</p><p translation-result="on">你可以用 <code>i18n</code> 属性的值来添加这些文本信息的描述，例子如下：</p><p translation-origin="off">You can add a description of the text message as the value of the <code>i18n</code> attribute, as shown in the example below:</p><code-example path="i18n/doc-files/app.component.html" region="i18n-attribute-desc" header="src/app/app.component.html" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;h1 i18n="An introduction header for this sample"&gt;Hello i18n!&lt;/h1&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h1</span><span class="pln"> </span><span class="atn">i18n</span><span class="pun">=</span><span class="atv">"An introduction header for this sample"</span><span class="tag">&gt;</span><span class="pln">Hello i18n!</span><span class="tag">&lt;/h1&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">为了给出正确的翻译，翻译者需要知道你这段文本在特定情境下的<em>含义</em>或<em>真实意图</em>。</p><p translation-origin="off">The translator may also need to know the meaning or intent of the text message within this particular app context.</p><p translation-result="on">在描述的前面，你可以用 <code>i18n</code> 开头的属性值来为指定的字符串添加一些上下文含义，用 <code>|</code> 将其与描述文字隔开(<code>&lt;意图&gt;|&lt;描述&gt;</code>)。</p><p translation-origin="off">You add context by beginning the <code>i18n</code> attribute value with the <em>meaning</em> and separating it from the <em>description</em> with the <code>|</code> character: <code>&lt;meaning&gt;|&lt;description&gt;</code></p><code-example path="i18n/doc-files/app.component.html" region="i18n-attribute-meaning" header="src/app/app.component.html" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;h1 i18n="site header|An introduction header for this sample"&gt;Hello i18n!&lt;/h1&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h1</span><span class="pln"> </span><span class="atn">i18n</span><span class="pun">=</span><span class="atv">"site header|An introduction header for this sample"</span><span class="tag">&gt;</span><span class="pln">Hello i18n!</span><span class="tag">&lt;/h1&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">如果所有地方出现的文本具有<strong>相同</strong>含义时，它们应该有<strong>相同</strong>的翻译， 但是如果在某些地方它具有<strong>不同含义</strong>，那么它应该有不同的翻译。</p><p translation-origin="off">All occurrences of a text message that have the same meaning will have the same translation. A text message that is associated with different meanings can have different translations.</p><p translation-result="on">Angular 的提取工具会在翻译源文件中保留<strong>含义</strong>和<strong>描述</strong>，以支持符合特定上下文的翻译。但它只会使用含义和文本消息的组合来为待翻译文本生成明确的 id。如果你有两个相同的文本消息，但是含义不同，它们就会被分别提取。如果你有两个相同的文本消息，但是描述不同（但含义相同），它们就只会提取一次。</p><p translation-origin="off">The Angular extraction tool preserves both the meaning and the description in the translation source file to facilitate contextually-specific translations, but only the combination of meaning and text message are used to generate the specific id of a translation. If you have two similar text messages with different meanings, they are extracted separately. If you have two similar text messages with different descriptions (not different meanings), then they are extracted only once.</p><a id="custom-id"></a><h3 id="set-a-custom-id-for-persistence-and-maintenance" translation-result="on">设置一个自定义的 <code>id</code> 来提升可搜索性和可维护性<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#set-a-custom-id-for-persistence-and-maintenance"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="set-a-custom-id-for-persistence-and-maintenance">Set a custom id for persistence and maintenance<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#set-a-custom-id-for-persistence-and-maintenance"><i class="material-icons">link</i></a></h3><p translation-result="on">Angular 的 <code>i18n</code> 提取工具会为模板中每个带有 <code>i18n</code> 属性的元素生成一个<em>翻译单元（translation unit）</em>条目，并保存到一个文件中。默认情况下，它为每个翻译单元指定一个唯一的 <code>id</code>，就像这样：</p><p translation-origin="off">The angular i18n extractor tool generates a file with a translation unit entry for each <code>i18n</code> attribute in a template. By default, it assigns each translation unit a unique id such as this one:</p><code-example path="i18n/doc-files/messages.fr.xlf.html" region="generated-id" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html"&gt;</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">当你修改这段可翻译的文字时，提取工具会为那个翻译单元生成一个新的 <code>id</code>。 你就要使用这个新的 id 来修改这个翻译文件。</p><p translation-origin="off">When you change the translatable text, the extractor tool generates a new id for that translation unit. You must then update the translation file with the new id.</p><p translation-result="on">另一种方案是，你可以使用 <code>@@</code> 前缀在 <code>i18n</code> 属性中指定一个自定义的 id。 下面这个例子就定义了一个自定义 id <code>introductionHeader</code>：</p><p translation-origin="off">Alternatively, you can specify a custom id in the <code>i18n</code> attribute by using the prefix <code>@@</code>. The example below defines the custom id <code>introductionHeader</code>:</p><code-example path="i18n/doc-files/app.component.html" region="i18n-attribute-solo-id" header="app/app.component.html" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;h1 i18n="@@introductionHeader"&gt;Hello i18n!&lt;/h1&gt;</div><header class="ng-star-inserted">app/app.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h1</span><span class="pln"> </span><span class="atn">i18n</span><span class="pun">=</span><span class="atv">"@@introductionHeader"</span><span class="tag">&gt;</span><span class="pln">Hello i18n!</span><span class="tag">&lt;/h1&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">一旦你指定了自定义 id，提取工具和编译器就会用*你的自定义 id` 生成一个翻译单元，而不会再改变它。</p><p translation-origin="off">When you specify a custom id, the extractor tool and compiler generate a translation unit with that custom id.</p><code-example path="i18n/doc-files/messages.fr.xlf.html" region="custom-id" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;trans-unit id="introductionHeader" datatype="html"&gt;</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"introductionHeader"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">自定义 id 是永久性的，翻译工具待翻译文本发生变化时不会修改它。 因此，你不必修改翻译结果。这种方式可以让维护变得更简单。</p><p translation-origin="off">The custom id is persistent. The extractor tool does not change it when the translatable text changes. Therefore, you do not need to update the translation. This approach makes maintenance easier.</p><h4 id="use-a-custom-id-with-a-description" translation-result="on">在描述中使用自定义 id<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#use-a-custom-id-with-a-description"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="use-a-custom-id-with-a-description">Use a custom id with a description<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#use-a-custom-id-with-a-description"><i class="material-icons">link</i></a></h4><p translation-result="on">你可以在 <code>i18n</code> 属性的值中使用自定义 id 与描述信息的组合。 下面的例子中，<code>i18n</code> 的属性中中就包含了一条跟在自定义 <code>id</code> 后面的描述信息：</p><p translation-origin="off">You can use a custom id in combination with a description by including both in the value of the <code>i18n</code> attribute. In the example below, the <code>i18n</code> attribute value includes a description, followed by the custom <code>id</code>:</p><code-example path="i18n/doc-files/app.component.html" region="i18n-attribute-id" header="app/app.component.html" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;h1 i18n="An introduction header for this sample@@introductionHeader"&gt;Hello i18n!&lt;/h1&gt;</div><header class="ng-star-inserted">app/app.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h1</span><span class="pln"> </span><span class="atn">i18n</span><span class="pun">=</span><span class="atv">"An introduction header for this sample@@introductionHeader"</span><span class="tag">&gt;</span><span class="pln">Hello i18n!</span><span class="tag">&lt;/h1&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">你还可以添加含义，例子如下：</p><p translation-origin="off">You also can add a meaning, as shown in this example:</p><code-example path="i18n/doc-files/app.component.html" region="i18n-attribute-meaning-and-id" header="app/app.component.html" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;h1 i18n="site header|An introduction header for this sample@@introductionHeader"&gt;Hello i18n!&lt;/h1&gt;</div><header class="ng-star-inserted">app/app.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h1</span><span class="pln"> </span><span class="atn">i18n</span><span class="pun">=</span><span class="atv">"site header|An introduction header for this sample@@introductionHeader"</span><span class="tag">&gt;</span><span class="pln">Hello i18n!</span><span class="tag">&lt;/h1&gt;</span></code>
    </pre></aio-code></code-example><h4 id="define-unique-custom-ids" translation-result="on">定义唯一的自定义 ID<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#define-unique-custom-ids"><i class="material-icons">link</i></a></h4><h4 translation-origin="off" id="define-unique-custom-ids">Define unique custom ids<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#define-unique-custom-ids"><i class="material-icons">link</i></a></h4><p translation-result="on">要确保自定义 id 是唯一的。如果你对两个<em>不同的</em>文本块使用了同一个 id，那么就只有一个会被提取出来，然后其翻译结果会被用于全部原始文本消息。</p><p translation-origin="off">Be sure to define custom ids that are unique. If you use the same id for two different text messages, only the first one is extracted, and its translation is used in place of both original text messages.</p><p translation-result="on">在下面这个例子中，自定义的 id <code>myId</code> 就被用在了两个不同的消息上：</p><p translation-origin="off">In the example below the custom id <code>myId</code> is used for two different messages:</p><code-example language="html" ng-version="7.0.0"><div style="display:none">&lt;h3 i18n="@@myId"&gt;Hello&lt;/h3&gt; &lt;!-- ... --&gt; &lt;p i18n="@@myId"&gt;Good bye&lt;/p&gt;</div><aio-code><pre class="prettyprint lang-html">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h3</span><span class="pln"> </span><span class="atn">i18n</span><span class="pun">=</span><span class="atv">"@@myId"</span><span class="tag">&gt;</span><span class="pln">Hello</span><span class="tag">&lt;/h3&gt;</span><span class="pln">

</span><span class="com">&lt;!-- ... --&gt;</span><span class="pln">

</span><span class="tag">&lt;p</span><span class="pln"> </span><span class="atn">i18n</span><span class="pun">=</span><span class="atv">"@@myId"</span><span class="tag">&gt;</span><span class="pln">Good bye</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">考虑下列法文翻译：</p><p translation-origin="off">Consider this translation to French:</p><code-example language="xml" ng-version="7.0.0"><div style="display:none">&lt;trans-unit id="myId" datatype="html"&gt; &lt;source&gt;Hello&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a> <a href="api/animations/state" class="code-anchor">state</a>="new"&gt;Bonjour&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt;</div><aio-code><pre class="prettyprint lang-xml">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myId"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;source&gt;</span><span class="pln">Hello</span><span class="tag">&lt;/source&gt;</span><span class="pln">
  </span><span class="tag">&lt;</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="pln"> </span><a href="api/animations/state" class="code-anchor"><span class="atn">state</span></a><span class="pun">=</span><span class="atv">"new"</span><span class="tag">&gt;</span><span class="pln">Bonjour</span><span class="tag">&lt;/</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/trans-unit&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">由于自定义 id 都是一样的，所以翻译结果中所有的元素都包含同样的文本 <code>Bonjour</code>：</p><p translation-origin="off">Because the custom id is the same, both of the elements in the resulting translation contain the same text, <code>Bonjour</code>:</p><code-example language="html" ng-version="7.0.0"><div style="display:none">&lt;h3&gt;Bonjour&lt;/h3&gt; &lt;!-- ... --&gt; &lt;p&gt;Bonjour&lt;/p&gt;</div><aio-code><pre class="prettyprint lang-html">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h3&gt;</span><span class="pln">Bonjour</span><span class="tag">&lt;/h3&gt;</span><span class="pln">

</span><span class="com">&lt;!-- ... --&gt;</span><span class="pln">

</span><span class="tag">&lt;p&gt;</span><span class="pln">Bonjour</span><span class="tag">&lt;/p&gt;</span></code>
    </pre></aio-code></code-example><a id="no-element"></a><h3 id="translate-text-without-creating-an-element" translation-result="on">翻译文本，而不必创建元素<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translate-text-without-creating-an-element"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="translate-text-without-creating-an-element">Translate text without creating an element<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translate-text-without-creating-an-element"><i class="material-icons">link</i></a></h3><p translation-result="on">如果要翻译一段纯文本，你就可以把它用 <code>&lt;span&gt;</code> 标签包裹起来。 但如果由于某些原因（比如 CSS 结构方面的考虑），你可能不希望仅仅为了翻译而创建一个新的 DOM 元素，那么也可以把这段文本包裹进一个 <code>&lt;ng-container&gt;</code> 元素中。<code>&lt;ng-container&gt;</code> 将被转换成一个 HTML 注释：</p><p translation-origin="off">If there is a section of text that you would like to translate, you can wrap it in a <code>&lt;span&gt;</code> tag. However, if you don't want to create a new DOM element merely to facilitate translation, you can wrap the text in an <code>&lt;ng-container&gt;</code> element. The <code>&lt;ng-container&gt;</code> is transformed into an html comment:</p><code-example path="i18n/src/app/app.component.html" region="i18n-ng-container" header="src/app/app.component.html" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;ng-container i18n&gt;I don't output any element&lt;/ng-container&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;ng-container</span><span class="pln"> </span><span class="atn">i18n</span><span class="tag">&gt;</span><span class="pln">I don't output any element</span><span class="tag">&lt;/ng-container&gt;</span></code>
    </pre></aio-code></code-example><a id="translate-attributes"></a><h3 id="translate-attributes" translation-result="on">翻译属性<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translate-attributes"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="translate-attributes">Translate attributes<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translate-attributes"><i class="material-icons">link</i></a></h3><p translation-result="on">要显示的文本有时候会以属性值的形式提供，而不是标签的内容。 比如，假如你的模板中有一个带 <code>title</code> 属性的图片，这个 <code>title</code> 属性的文本值就要翻译。</p><p translation-origin="off">Displayed text is sometimes supplied as the value of an attribute, rather than the content of tag. For example, if your template has an image with a <code>title</code> attribute, the text value of the <code>title</code> attribute needs to be translated.</p><code-example path="i18n/doc-files/app.component.html" region="i18n-title" header="src/app/app.component.html" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;img [src]="logo" title="Angular logo"&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;img</span><span class="pln"> [</span><span class="atn">src</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"logo"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"Angular logo"</span><span class="tag">&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">要把一个属性标记为需要翻译的，就添加一个形如 <code>i18n-x</code> 的属性，其中的 <code>x</code> 是要翻译的属性的名字。 下面的例子中演示了如何通过给 <code>img</code> 标签添加 <code>i18n-title</code> 属性来把 <code>title</code> 属性标记为待翻译的。</p><p translation-origin="off">To mark an attribute for translation, add an attribute in the form of <code>i18n-x</code>, where <code>x</code> is the name of the attribute to translate. The following example shows how to mark the <code>title</code> attribute for translation by adding the <code>i18n-title</code> attribute on the <code>img</code> tag:</p><code-example path="i18n/src/app/app.component.html" region="i18n-title-translate" header="src/app/app.component.html" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;img [src]="logo" i18n-title title="Angular logo" /&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;img</span><span class="pln"> [</span><span class="atn">src</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"logo"</span><span class="pln"> </span><span class="atn">i18n-title</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"Angular logo"</span><span class="pln"> </span><span class="tag">/&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">这个技巧适用于任何元素上的任何属性。</p><p translation-origin="off">This technique works for any attribute of any element.</p><p translation-result="on">你还可以通过 <code>i18n-x="&lt;meaning&gt;|&lt;description&gt;@@&lt;id&gt;"</code> 语法来给它写上含义（meaning）、描述（description）和 id。</p><p translation-origin="off">You also can assign a meaning, description, and id with the <code>i18n-x="&lt;meaning&gt;|&lt;description&gt;@@&lt;id&gt;"</code> syntax.</p><h2 id="regular-expressions-for-plurals-and-selections" translation-result="on">复数与选择的表达式<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#regular-expressions-for-plurals-and-selections"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="regular-expressions-for-plurals-and-selections">Regular expressions for plurals and selections<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#regular-expressions-for-plurals-and-selections"><i class="material-icons">link</i></a></h2><p translation-result="on">不同的语言具有不同的复数规则和语法结构，这为翻译工作平添了很多复杂性。 你可以使用带有 <code>plural</code> 和 <code>select</code> 的正则表达式来提供一些模式，来辅助翻译这些情况。</p><p translation-origin="off">Different languages have different pluralization rules and grammatical constructions that add complexity to the translation task. You can use regular expressions with the <code>plural</code> and <code>select</code> clauses to provide patterns that aid translation in these cases.</p><a id="plural-ICU"></a><h3 id="pluralization" translation-result="on">复数规则<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#pluralization"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="pluralization">Pluralization<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#pluralization"><i class="material-icons">link</i></a></h3><p translation-result="on">假设你要说某些东西“updated x minutes ago（在 x 分钟前修改了）”。 在英语中，根据分钟数，可能要显示为 "just now"、"one minute ago" 或 "x minutes ago"（这里的 x 是实际的数量）。 而在其它语言中则可能会有不同的基数规则。</p><p translation-origin="off">Suppose that you want to say that something was "updated x minutes ago". In English, depending upon the number of minutes, you could display "just now", "one minute ago", or "x minutes ago" (with x being the actual number). Other languages might express the cardinality differently.</p><p translation-result="on">下面这个例子示范了如何使用 ICU 表达式 <code>plural</code> 来根据这次修改发生的时间显示这三个选项之一：</p><p translation-origin="off">The example below shows how to use a <code>plural</code> ICU expression to display one of those three options based on when the update occurred:</p><code-example path="i18n/src/app/app.component.html" region="i18n-plural" header="src/app/app.component.html" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;span i18n&gt;Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}&lt;/span&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">i18n</span><span class="tag">&gt;</span><span class="pln">Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}</span><span class="tag">&lt;/span&gt;</span></code>
    </pre></aio-code></code-example><ul><li><p translation-result="on">第一个参数是 key。它绑定到了组件中表示分钟数的 <code>minutes</code> 属性。</p><p translation-origin="off">The first parameter is the key. It is bound to the component property (<code>minutes</code>), which determines the number of minutes.</p></li><li><p translation-result="on">第二个参数表示这是一个 <code>plural</code>（复数）翻译类型。</p><p translation-origin="off">The second parameter identifies this as a <code>plural</code> translation type.</p></li><li><p translation-result="on">第三个参数定义了一组复数表示模式，这个模式由复数类别和它们所匹配的值组成。</p><p translation-origin="off">The third parameter defines a pluralization pattern consisting of pluralization categories and their matching values.</p></li></ul><div class="alert is-helpful"><p translation-result="on">这种语法遵守 <a href="http://cldr.unicode.org/index/cldr-spec/plural-rules" title="Pluralization Rules">CLDR 复数规则</a> 中指定的 <a href="http://userguide.icu-project.org/formatparse/messages" title="ICU Message Format">ICU 消息格式</a></p><p translation-origin="off">This syntax conforms to the <a href="http://userguide.icu-project.org/formatparse/messages" title="ICU Message Format">ICU Message Format</a> as specified in the <a href="http://cldr.unicode.org/index/cldr-spec/plural-rules" title="Pluralization Rules">CLDR pluralization rules</a>.</p></div><p translation-result="on">复数类别包括（取决于语言）：</p><p translation-origin="off">Pluralization categories include (depending on the language):</p><ul><li><p translation-result="on">=0 （或其它数字）</p><p translation-origin="off">=0 (or any other number)</p></li><li><p translation-result="on">zero（零）</p><p translation-origin="off">zero</p></li><li><p translation-result="on">one（一个)</p><p translation-origin="off">one</p></li><li><p translation-result="on">two（两个）</p><p translation-origin="off">two</p></li><li><p translation-result="on">few（少数）</p><p translation-origin="off">few</p></li><li><p translation-result="on">many（很多）</p><p translation-origin="off">many</p></li><li><p translation-result="on">other（其它）</p><p translation-origin="off">other</p></li></ul><p translation-result="on">复数类别之后的括号（<code>{}</code>）中是默认的<em>英语</em>文本。</p><p translation-origin="off">After the pluralization category, put the default English text in braces (<code>{}</code>).</p><p translation-result="on">在上面的例子中，这三个选项都是根据复数模式来指定的。要说零分钟，就用 <code>=0 {just now}</code>。一分钟就用 <code>=1 {one minute}</code>。 无法匹配的数量就用 <code>other {{{minutes}} minutes ago}</code>。如果复数规则与此不同，你还可以为两个、三个或任意数量添加更多的模式。对于这个 “minute” 的例子，英语中只要这三种模式就够了。</p><p translation-origin="off">In the example above, the three options are specified according to that pluralization pattern. For talking about zero minutes, you use <code>=0 {just now}</code>. For one minute, you use <code>=1 {one minute}</code>. Any unmatched cardinality uses <code>other {{{minutes}} minutes ago}</code>. You could choose to add patterns for two, three, or any other number if the pluralization rules were different. For the example of "minute", only these three patterns are necessary in English.</p><div class="alert is-helpful"><p translation-result="on">你可以在翻译结果中使用插值表达式和 HTML 标记。</p><p translation-origin="off">You can use interpolations and html markup inside of your translations.</p></div><a id="select-ICU"></a><h3 id="select-among-alternative-text-messages" translation-result="on">在候选文本中选择<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#select-among-alternative-text-messages"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="select-among-alternative-text-messages">Select among alternative text messages<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#select-among-alternative-text-messages"><i class="material-icons">link</i></a></h3><p translation-result="on">如果你的模板中需要根据某个变量的值显示出不同的文本消息，你还需要对所有这些候选文本进行翻译。</p><p translation-origin="off">If your template needs to display different text messages depending on the value of a variable, you need to translate all of those alternative text messages.</p><p translation-result="on">你可以使用 ICU 表达式 <code>select</code> 来翻译这些。它与 ICU 表达式 <code>plural</code> 类似，只是你要根据一个字符串值而不是数字来选择这些候选翻译文本，而这些字符串值是你自己定义的。</p><p translation-origin="off">You can handle this with a <code>select</code> ICU expression. It is similar to the <code>plural</code> expressions except that you choose among alternative translations based on a string value instead of a number, and you define those string values.</p><p translation-result="on">组件模板中的下列消息格式绑定到了组件的 <code>gender</code> 属性，这个属性的取值是 "m" 或 "f" 或 "o"。 这个消息会把那些值映射到适当的翻译文本：</p><p translation-origin="off">The following format message in the component template binds to the component's <code>gender</code> property, which outputs one of the following string values: "m", "f" or "o". The message maps those values to the appropriate translations:</p><code-example path="i18n/src/app/app.component.html" region="i18n-select" header="src/app/app.component.html" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;span i18n&gt;The author is {gender, select, male {male} female {female} other {other}}&lt;/span&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">i18n</span><span class="tag">&gt;</span><span class="pln">The author is {gender, select, male {male} female {female} other {other}}</span><span class="tag">&lt;/span&gt;</span></code>
    </pre></aio-code></code-example><a id="nesting-ICUS"></a><h3 id="nesting-plural-and-select-icu-expressions" translation-result="on">把"复数"与"选择"表达式嵌套在一起<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#nesting-plural-and-select-icu-expressions"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="nesting-plural-and-select-icu-expressions">Nesting plural and select ICU expressions<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#nesting-plural-and-select-icu-expressions"><i class="material-icons">link</i></a></h3><p translation-result="on">你也可以把不同的 ICU 表达式嵌套在一起，比如：</p><p translation-origin="off">You can also nest different ICU expressions together, as shown in this example:</p><code-example path="i18n/src/app/app.component.html" region="i18n-nested" header="src/app/app.component.html" ng-version="7.0.0"><div style="display:none">&lt;span i18n&gt;Updated: {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago by {gender, select, male {male} female {female} other {other}}}} &lt;/span&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">i18n</span><span class="tag">&gt;</span><span class="pln">Updated: {minutes, plural,
  =0 {just now}
  =1 {one minute ago}
  other {{{minutes}} minutes ago by {gender, select, male {male} female {female} other {other}}}}
</span><span class="tag">&lt;/span&gt;</span></code>
    </pre></aio-code></code-example><a id="ng-xi18n"></a> <a id="ng-xi18n-options"></a><h2 id="create-a-translation-source-file" translation-result="on">创建翻译源文件<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#create-a-translation-source-file"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="create-a-translation-source-file">Create a translation source file<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#create-a-translation-source-file"><i class="material-icons">link</i></a></h2><p translation-result="on">当你的应用就绪之后，你可以使用 Angular CLI 来提取出带有 <code>i18n</code> 标记和带有 <code>i18n-x</code> 属性的文本信息，并存入一个翻译源文件。 在应用的项目根目录打开一个终端窗口，并运行 CLI 的 <code>xi18n</code> 命令。</p><p translation-origin="off">When your app is ready, you can use the Angular CLI to extract the text messages marked with <code>i18n</code> and attributes marked with <code>i18n-x</code> into a translation source file. Open a terminal window at the root of the app project and run the CLI command <code>xi18n</code>.</p><code-example language="sh" class="code-shell" ng-version="7.0.0"><div style="display:none">ng xi18n</div><aio-code><pre class="prettyprint lang-sh">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng xi18n</span></code>
    </pre></aio-code></code-example><p translation-result="on">本工具默认会在你的 <code>src/</code> 目录下生成一个名叫 <code>messages.xlf</code> 的翻译文件。</p><p translation-origin="off">By default, the command creates a file named <code>messages.xlf</code> in your <code>src/</code> folder.</p><div class="alert is-helpful"><p translation-result="on">如果你不使用 CLI，那么你有两个选择：</p><p translation-origin="off">If you don't use the CLI, you have two options:</p><ul><li><p translation-result="on">你可以直接使用来自 <code>@angular/compiler-cli</code> 包中的 <code>ng-xi18n</code> 工具。更多信息，参见 <a href="cli/xi18n"><code>ng xi18n</code> 命令的文档</a>。</p><p translation-origin="off">You can use the <code>ng-xi18n</code> tool directly from the <code>@angular/compiler-cli</code> package. For more information, see the <a href="cli/xi18n"><code>ng xi18n</code> command documentation</a>.</p></li><li><p translation-result="on">你可以使用 CLI 中来自 <code>@ngtools/webpack</code> 包中的 Webpack 插件 <code>AngularCompilerPlugin</code>。设置其 <code>i18nOutFile</code> 和 <code>i18nOutFormat</code> 参数进行触发。 更多信息，参见 <a href="https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack">Angular AOT Webpack 插件文档</a>。</p><p translation-origin="off">You can use the CLI Webpack plugin <code>AngularCompilerPlugin</code> from the <code>@ngtools/webpack</code> package. Set the parameters <code>i18nOutFile</code> and <code>i18nOutFormat</code> to trigger the extraction. For more information, see the <a href="https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack">Angular Ahead-of-Time Webpack Plugin documentation</a>.</p></li></ul></div><a id="other-formats"></a><h3 id="output-options" translation-result="on">输出选项<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#output-options"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="output-options">Output options<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#output-options"><i class="material-icons">link</i></a></h3><p translation-result="on">你可以提供一些命令选项来改变所提取的文件的格式、名字、位置以及源语言区域。 比如，在 <code>src/<a href="api/common/NgLocaleLocalization#locale" class="code-anchor">locale</a></code> 目录下创建一个文件，可以指定输出路径（output path）：</p><p translation-origin="off">You can supply command options to change the format, the name, the location, and the source locale of the extracted file. For example, to create a file in the <code>src/<a href="api/common/NgLocaleLocalization#locale" class="code-anchor">locale</a></code> folder, specify the output path:</p><code-example language="sh" class="code-shell" ng-version="7.0.0"><div style="display:none">ng xi18n --output-path src/<a href="api/common/NgLocaleLocalization#locale" class="code-anchor">locale</a></div><aio-code><pre class="prettyprint lang-sh">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng xi18n </span><span class="pun">--</span><span class="pln">output</span><span class="pun">-</span><span class="pln">path src</span><span class="pun">/</span><a href="api/common/NgLocaleLocalization#locale" class="code-anchor"><span class="pln">locale</span></a></code>
    </pre></aio-code></code-example><p translation-result="on">默认情况下，<code>xi18n</code> 命令会以 <a href="https://en.wikipedia.org/wiki/XLIFF">XML 翻译交换文件格式(XLIFF, 1.2 版)</a> 生成一个名叫 <code>messages.xlf</code> 的翻译文件。</p><p translation-origin="off">By default, the <code>xi18n</code> command generates a translation file named <code>messages.xlf</code> in the <a href="https://en.wikipedia.org/wiki/XLIFF">XML Localization Interchange File Format (XLIFF, version 1.2)</a>.</p><p translation-result="on">该命令可以用三种翻译格式之一读写文件：</p><p translation-origin="off">The command can read and write files in three translation formats:</p><ul><li><p translation-result="on">XLIFF 1.2 (默认)</p><p translation-origin="off">XLIFF 1.2 (default)</p></li><li><p>XLIFF 2</p></li><li><p translation-result="on"><a href="http://cldr.unicode.org/development/development-process/design-proposals/xmb">XML 消息包 (XMB)</a></p><p translation-origin="off"><a href="http://cldr.unicode.org/development/development-process/design-proposals/xmb">XML Message Bundle (XMB)</a></p></li></ul><p translation-result="on">你可以使用 <code>--i18nFormat</code> 选项明确指定想用的格式，范例如下：</p><p translation-origin="off">You can specify the translation format explicitly with the <code>--i18nFormat</code> command option, as illustrated in these example commands:</p><code-example language="sh" class="code-shell" ng-version="7.0.0"><div style="display:none">ng xi18n --i18n-format=xlf ng xi18n --i18n-format=xlf2 ng xi18n --i18n-format=xmb</div><aio-code><pre class="prettyprint lang-sh">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng xi18n  </span><span class="pun">--</span><span class="pln">i18n</span><span class="pun">-</span><span class="pln">format</span><span class="pun">=</span><span class="pln">xlf
ng xi18n  </span><span class="pun">--</span><span class="pln">i18n</span><span class="pun">-</span><span class="pln">format</span><span class="pun">=</span><span class="pln">xlf2
ng xi18n  </span><span class="pun">--</span><span class="pln">i18n</span><span class="pun">-</span><span class="pln">format</span><span class="pun">=</span><span class="pln">xmb</span></code>
    </pre></aio-code></code-example><p translation-result="on">本章的范例使用默认的 XLIFF 1.2 格式。</p><p translation-origin="off">The sample in this guide uses the default XLIFF 1.2 format.</p><div class="alert is-helpful"><p translation-result="on">XLIFF 文件带有 .xlf 扩展名。XMB 格式会生成 .xmb 格式的源文件，但使用 .xtb（XML 翻译包）格式的翻译文件。</p><p translation-origin="off">XLIFF files have the extension .xlf. The XMB format generates .xmb source files but uses .xtb (XML Translation Bundle: XTB) translation files.</p></div><p translation-result="on">你还可以使用 <code>--out-file</code> 选项来为提取工具生成的翻译源文件改名：</p><p translation-origin="off">You can change the name of the translation source file that is generated by the extraction tool with the <code>--outFile</code> command option:</p><code-example language="sh" class="code-shell" ng-version="7.0.0"><div style="display:none">ng xi18n --out-file source.xlf</div><aio-code><pre class="prettyprint lang-sh">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng xi18n </span><span class="pun">--</span><span class="pln">out</span><span class="pun">-</span><span class="pln">file source</span><span class="pun">.</span><span class="pln">xlf</span></code>
    </pre></aio-code></code-example><p translation-result="on">你还可以使用 <code>--i18n-locale</code> 选项来指定应用的基本地区：</p><p translation-origin="off">You can specify the base locale of your app with the<code>--i18n-locale</code> command option:</p><code-example language="sh" class="code-shell" ng-version="7.0.0"><div style="display:none">ng xi18n --i18n-locale fr</div><aio-code><pre class="prettyprint lang-sh">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng xi18n </span><span class="pun">--</span><span class="pln">i18n</span><span class="pun">-</span><span class="pln">locale fr</span></code>
    </pre></aio-code></code-example><p translation-result="on">该提取工具会用这个地区标识把本地化信息添加到你的翻译源文件中。这个信息对 Angular 来说没用，不过外部翻译工具可能会需要它。</p><p translation-origin="off">The extraction tool uses the locale to add the app locale information into your translation source file. This information is not used by Angular, but external translation tools may need it.</p><a id="translate"></a><h2 id="translate-the-source-text" translation-result="on">翻译源文本<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translate-the-source-text"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="translate-the-source-text">Translate the source text<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translate-the-source-text"><i class="material-icons">link</i></a></h2><p translation-result="on"><code>ng xi18n</code> 命令会在项目的 <code>src</code> 目录下生成一个名为 <code>messages.xlf</code> 的翻译源文件。</p><p translation-origin="off">The <code>ng xi18n</code> command generates a translation source file named <code>messages.xlf</code> in the project <code>src</code> folder.</p><p translation-result="on">下一步是将要显示的字符串翻译到指定语言的翻译文件。 这个例子中创建了一个法语翻译文件。</p><p translation-origin="off">The next step is to translate the display strings in this source file into language-specific translation files. The example in this guide creates a French translation file.</p><a id="localization-folder"></a><h3 id="create-a-localization-folder" translation-result="on">新建一个本土化目录<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#create-a-localization-folder"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="create-a-localization-folder">Create a localization folder<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#create-a-localization-folder"><i class="material-icons">link</i></a></h3><p translation-result="on">大多数应用都要被翻译成多种其它语言，因此，为全部国际化工作做适当的调整项目目录结构是一种标准实践。</p><p translation-origin="off">Most apps are translated into more than one other language. For this reason, it is standard practice for the project structure to reflect the entire internationalization effort.</p><p translation-result="on">方法之一是为本土化和相关资源（比如国际化文件）创建一个专门的目录。</p><p translation-origin="off">One approach is to dedicate a folder to localization and store related assets, such as internationalization files, there.</p><div class="alert is-helpful"><p translation-result="on">本土化和国际化是<a href="https://en.wikipedia.org/wiki/Internationalization_and_localization" target="_blank">不同但是很相近的概念</a>。</p><p translation-origin="off">Localization and internationalization are <a href="https://en.wikipedia.org/wiki/Internationalization_and_localization">different but closely related terms</a>.</p></div><p translation-result="on">本指南遵循了这种方式。在<code>src/</code>目录下，有一个专门的<code><a href="api/common/NgLocaleLocalization#locale" class="code-anchor">locale</a></code>目录，该目录中的文件都带一个与相关地区匹配的扩展名。</p><p translation-origin="off">This guide follows that approach. It has a <code><a href="api/common/NgLocaleLocalization#locale" class="code-anchor">locale</a></code> folder under <code>src/</code>. Assets within that folder have a filename extension that matches their associated locale.</p><h3 id="create-the-translation-files" translation-result="on">创建翻译文件<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#create-the-translation-files"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="create-the-translation-files">Create the translation files<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#create-the-translation-files"><i class="material-icons">link</i></a></h3><p translation-result="on">对每个翻译文件来说，都必须至少有一个语言的翻译文件作为翻译结果。</p><p translation-origin="off">For each translation source file, there must be at least one language translation file for the resulting translation.</p><p translation-result="on">对于这个例子：</p><p translation-origin="off">For this example:</p><ol><li><p translation-result="on">复制一份 <code>messages.xlf</code> 文件。</p><p translation-origin="off">Make a copy of the <code>messages.xlf</code> file.</p></li><li><p translation-result="on">把这个副本放进 <code><a href="api/common/NgLocaleLocalization#locale" class="code-anchor">locale</a></code> 目录下。</p><p translation-origin="off">Put the copy in the <code><a href="api/common/NgLocaleLocalization#locale" class="code-anchor">locale</a></code> folder.</p></li><li><p translation-result="on">把这个副本改名为 <code>messages.fr.xlf</code> 以作为法语翻译结果。</p><p translation-origin="off">Rename the copy to <code>messages.fr.xlf</code> for the French language translation.</p></li></ol><p translation-result="on">如果你要翻译为其他语言，那就为每一个目标语种重复上述步骤。</p><p translation-origin="off">If you were translating to other languages, you would repeat these steps for each target language.</p><a id="translate-text-nodes"></a><h3 id="translate-text-nodes" translation-result="on">翻译文本节点<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translate-text-nodes"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="translate-text-nodes">Translate text nodes<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translate-text-nodes"><i class="material-icons">link</i></a></h3><p translation-result="on">在现实世界中，<code>messages.fr.xlf</code> 文件会被发给法语翻译，他们会使用某种 XLIFF 文件编辑器来翻译它。</p><p translation-origin="off">In a large translation project, you would send the <code>messages.fr.xlf</code> file to a French translator who would enter the translations using an XLIFF file editor.</p><p translation-result="on">你不需要任何编辑器或者法语知识就可以轻易的翻译本例子文件。</p><p translation-origin="off">This sample file is easy to translate without a special editor or knowledge of French.</p><ol><li><p translation-result="on">打开 <code>messages.fr.xlf</code> 并找到第一个 <code>&lt;trans-unit&gt;</code> 区：</p><p translation-origin="off">Open <code>messages.fr.xlf</code> and find the first <code>&lt;trans-unit&gt;</code> section:</p></li></ol><blockquote><code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-hello-before" header="src/locale/messages.fr.xlf (trans-unit)" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;trans-unit id="introductionHeader" datatype="html"&gt; &lt;source&gt;Hello i18n!&lt;/source&gt; &lt;note priority="1" from="description"&gt;An introduction header for this sample&lt;/note&gt; &lt;note priority="1" from="meaning"&gt;<a href="api/common/http/HttpEventType#User" class="code-anchor">User</a> welcome&lt;/note&gt; &lt;/trans-unit&gt;</div><header class="ng-star-inserted">src/locale/messages.fr.xlf (trans-unit)</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/locale/messages.fr.xlf (trans-unit)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"introductionHeader"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;source&gt;</span><span class="pln">Hello i18n!</span><span class="tag">&lt;/source&gt;</span><span class="pln">
  </span><span class="tag">&lt;note</span><span class="pln"> </span><span class="atn">priority</span><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><span class="atn">from</span><span class="pun">=</span><span class="atv">"description"</span><span class="tag">&gt;</span><span class="pln">An introduction header for this sample</span><span class="tag">&lt;/note&gt;</span><span class="pln">
  </span><span class="tag">&lt;note</span><span class="pln"> </span><span class="atn">priority</span><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><span class="atn">from</span><span class="pun">=</span><span class="atv">"meaning"</span><span class="tag">&gt;</span><a href="api/common/http/HttpEventType#User" class="code-anchor"><span class="pln">User</span></a><span class="pln"> welcome</span><span class="tag">&lt;/note&gt;</span><span class="pln">
</span><span class="tag">&lt;/trans-unit&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">这个 XML 元素表示前面你加过 <code>i18n</code> 属性的那个打招呼用的 <code>&lt;h1&gt;</code> 标签。</p><p translation-origin="off">This XML element represents the translation of the <code>&lt;h1&gt;</code> greeting tag that you marked with the <code>i18n</code> attribute earlier in this guide.</p><p translation-result="on">注意这个 <code>id=introductionHeader</code> 的翻译单元是来自你以前设置过的<a href="guide/i18n#custom-id" title="Set a custom id">自定义 <code>id</code></a>的。但是并没有源 HTML 所需的 <code>@@</code> 前缀。</p><p translation-origin="off">Note that the translation unit <code>id=introductionHeader</code> is derived from the <a href="guide/i18n#custom-id" title="Set a custom id">custom <code>id</code></a>that you set earlier, but without the <code>@@</code> prefix required in the source HTML.</p></blockquote><ol start="2"><li><p translation-result="on">复制 <code>&lt;source/&gt;</code> 标记，把它改名为 <code><a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a></code>，并把它的内容改为法语版的 “greeting”。 如果你要做的是更复杂的翻译，可能会使用由源文本、描述信息和含义等提供的信息和上下文来给出更恰当的法语翻译。</p><p translation-origin="off">Duplicate the <code>&lt;source/&gt;</code> tag, rename it <code><a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a></code>, and then replace its content with the French greeting. If you were working with a more complex translation, you could use the information and context provided by the source, description, and meaning elements to guide your selection of the appropriate French translation.</p></li></ol><blockquote><code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-hello" header="src/locale/messages.fr.xlf (trans-unit, after translation)" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;trans-unit id="introductionHeader" datatype="html"&gt; &lt;source&gt;Hello i18n!&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;Bonjour i18n !&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;note priority="1" from="description"&gt;An introduction header for this sample&lt;/note&gt; &lt;note priority="1" from="meaning"&gt;<a href="api/common/http/HttpEventType#User" class="code-anchor">User</a> welcome&lt;/note&gt; &lt;/trans-unit&gt;</div><header class="ng-star-inserted">src/locale/messages.fr.xlf (trans-unit, after translation)</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/locale/messages.fr.xlf (trans-unit, after translation)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"introductionHeader"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;source&gt;</span><span class="pln">Hello i18n!</span><span class="tag">&lt;/source&gt;</span><span class="pln">
  </span><span class="tag">&lt;</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">Bonjour i18n !</span><span class="tag">&lt;/</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;note</span><span class="pln"> </span><span class="atn">priority</span><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><span class="atn">from</span><span class="pun">=</span><span class="atv">"description"</span><span class="tag">&gt;</span><span class="pln">An introduction header for this sample</span><span class="tag">&lt;/note&gt;</span><span class="pln">
  </span><span class="tag">&lt;note</span><span class="pln"> </span><span class="atn">priority</span><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><span class="atn">from</span><span class="pun">=</span><span class="atv">"meaning"</span><span class="tag">&gt;</span><a href="api/common/http/HttpEventType#User" class="code-anchor"><span class="pln">User</span></a><span class="pln"> welcome</span><span class="tag">&lt;/note&gt;</span><span class="pln">
</span><span class="tag">&lt;/trans-unit&gt;</span></code>
    </pre></aio-code></code-example></blockquote><ol start="3"><li><p translation-result="on">用同样的方式翻译其它文本节点：</p><p translation-origin="off">Translate the other text nodes the same way:</p></li></ol><blockquote><code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-other-nodes" header="src/locale/messages.fr.xlf (trans-unit)" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html"&gt; &lt;source&gt;I don&amp;apos;t output any element&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;Je n'affiche aucun élément&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt; &lt;trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html"&gt; &lt;source&gt;Angular logo&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;Logo d'Angular&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt;</div><header class="ng-star-inserted">src/locale/messages.fr.xlf (trans-unit)</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/locale/messages.fr.xlf (trans-unit)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;source&gt;</span><span class="pln">I don&amp;apos;t output any element</span><span class="tag">&lt;/source&gt;</span><span class="pln">
  </span><span class="tag">&lt;</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">Je n'affiche aucun élément</span><span class="tag">&lt;/</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/trans-unit&gt;</span><span class="pln">
</span><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"701174153757adf13e7c24a248c8a873ac9f5193"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;source&gt;</span><span class="pln">Angular logo</span><span class="tag">&lt;/source&gt;</span><span class="pln">
  </span><span class="tag">&lt;</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">Logo d'Angular</span><span class="tag">&lt;/</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/trans-unit&gt;</span></code>
    </pre></aio-code></code-example></blockquote><div class="alert is-important"><p translation-result="on"><strong>Angular 的 i18n 工具会为这些翻译单元生成一些 id，不要修改它们。</strong> 每个 <code>id</code> 都是根据模板文本的内容及其含义来生成的。 无论你修改了文本还是含义，它们的 <code>id</code> 都会改变。 要了解更多信息，参见 <strong><a href="guide/i18n#custom-id">关于翻译文件可维护性的讨论</a></strong>。</p><p translation-origin="off"><strong>The Angular i18n tools generated the ids for these translation units. Don't change them.</strong> Each <code>id</code> depends upon the content of the template text and its assigned meaning. If you change either the text or the meaning, then the <code>id</code> changes. For more information, see the <strong><a href="guide/i18n#custom-id">translation file maintenance discussion</a></strong>.</p></div><a id="translate-plural-select"></a><h2 id="translating-plural-and-select-expressions" translation-result="on">翻译复数（plural）和选择（select）表达式<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translating-plural-and-select-expressions"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="translating-plural-and-select-expressions">Translating plural and select expressions<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translating-plural-and-select-expressions"><i class="material-icons">link</i></a></h2><p translation-result="on"><em>复数</em>和<em>选择</em>的 ICU 表达式都是分别提取的，所以在准备翻译时，它们需要格外注意。</p><p translation-origin="off">The <em>plural</em> and <em>select</em> ICU expressions are extracted separately, so they require special attention when preparing for translation.</p><p translation-result="on">你要从原始模板中其它地方识别出来的翻译单元来找到这些表达式之间的联系。 比如在这个例子中，你知道 <code>select</code> 一定会出现在 logo 的翻译单元的紧下方。</p><p translation-origin="off">Look for these expressions in relation to other translation units that you recognize from elsewhere in the source template. In this example, you know the translation unit for the <code>select</code> must be just below the translation unit for the logo.</p><a id="translate-plural"></a><h3 id="translate-plural" translation-result="on">翻译<em>复数</em><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translate-plural"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="translate-plural">Translate <em>plural</em><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translate-plural"><i class="material-icons">link</i></a></h3><p translation-result="on">要翻译一个复数，就要翻译它的 ICU 格式中匹配的值：</p><p translation-origin="off">To translate a <code>plural</code>, translate its ICU format match values:</p><code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-plural" header="src/locale/messages.fr.xlf (trans-unit)" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html"&gt; &lt;source&gt;{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {&lt;x id="INTERPOLATION" equiv-text="{{minutes}}"/&gt; minutes ago} }&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y <a href="api/router/RouterLinkWithHref" class="code-anchor">a</a> une minute} other {il y <a href="api/router/RouterLinkWithHref" class="code-anchor">a</a> &lt;x id="INTERPOLATION" equiv-text="{{minutes}}"/&gt; minutes} }&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt;</div><header class="ng-star-inserted">src/locale/messages.fr.xlf (trans-unit)</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/locale/messages.fr.xlf (trans-unit)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"5a134dee893586d02bffc9611056b9cadf9abfad"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;source&gt;</span><span class="pln">{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {</span><span class="tag">&lt;x</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"INTERPOLATION"</span><span class="pln"> </span><span class="atn">equiv-text</span><span class="pun">=</span><span class="atv">"{{minutes}}"</span><span class="tag">/&gt;</span><span class="pln"> minutes ago} }</span><span class="tag">&lt;/source&gt;</span><span class="pln">
  </span><span class="tag">&lt;</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y </span><a href="api/router/RouterLinkWithHref" class="code-anchor"><span class="pln">a</span></a><span class="pln"> une minute} other {il y </span><a href="api/router/RouterLinkWithHref" class="code-anchor"><span class="pln">a</span></a><span class="pln"> </span><span class="tag">&lt;x</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"INTERPOLATION"</span><span class="pln"> </span><span class="atn">equiv-text</span><span class="pun">=</span><span class="atv">"{{minutes}}"</span><span class="tag">/&gt;</span><span class="pln"> minutes} }</span><span class="tag">&lt;/</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/trans-unit&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">你可以添加或删除复数的情况，每种语言都有自己的基数规则。（参见 <a href="http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html">CLDR 复数规则</a>）。</p><p translation-origin="off">You can add or remove plural cases, with each language having its own cardinality. (See <a href="http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html">CLDR plural rules</a>.)</p><a id="translate-select"></a><h3 id="translate-select" translation-result="on">翻译<em>选择</em>（select）<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translate-select"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="translate-select">Translate <em>select</em><a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translate-select"><i class="material-icons">link</i></a></h3><p translation-result="on">下面是组件模板中的 ICU 表达式 <code>select</code> 的例子：</p><p translation-origin="off">Below is the content of our example <code>select</code> ICU expression in the component template:</p><code-example path="i18n/src/app/app.component.html" region="i18n-select" header="src/app/app.component.html" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;span i18n&gt;The author is {gender, select, male {male} female {female} other {other}}&lt;/span&gt;</div><header class="ng-star-inserted">src/app/app.component.html</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">i18n</span><span class="tag">&gt;</span><span class="pln">The author is {gender, select, male {male} female {female} other {other}}</span><span class="tag">&lt;/span&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">提取工具会把它拆成<em>两个</em>翻译单元，因为 ICU 表达式是分别提取的。</p><p translation-origin="off">The extraction tool broke that into two translation units because ICU expressions are extracted separately.</p><p translation-result="on">第一个单元包含 <code>select</code> 之外的文本。 这里的 <code>select</code> 是一个占位符 <code>&lt;x id="ICU"&gt;</code>，用来表示 <code>select</code> 中的消息。 翻译这段文本，如果需要就把占位符放在那里，但不要删除它。 如果删除了占位符，ICU 表达式就不会出现在翻译后的应用中。</p><p translation-origin="off">The first unit contains the text that was outside of the <code>select</code>. In place of the <code>select</code> is a placeholder, <code>&lt;x id="ICU"&gt;</code>, that represents the <code>select</code> message. Translate the text and move around the placeholder if necessary, but don't remove it. If you remove the placeholder, the ICU expression will not be present in your translated app.</p><code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-select-1" header="src/locale/messages.fr.xlf (trans-unit)" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;/trans-unit&gt; &lt;trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html"&gt; &lt;source&gt;The author is &lt;x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/&gt;&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;L'auteur est &lt;x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/&gt;&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt;</div><header class="ng-star-inserted">src/locale/messages.fr.xlf (trans-unit)</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/locale/messages.fr.xlf (trans-unit)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;/trans-unit&gt;</span><span class="pln">
</span><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"f99f34ac9bd4606345071bd813858dec29f3b7d1"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;source&gt;</span><span class="pln">The author is </span><span class="tag">&lt;x</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"ICU"</span><span class="pln"> </span><span class="atn">equiv-text</span><span class="pun">=</span><span class="atv">"{gender, select, male {...} female {...} other {...}}"</span><span class="tag">/&gt;&lt;/source&gt;</span><span class="pln">
  </span><span class="tag">&lt;</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">L'auteur est </span><span class="tag">&lt;x</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"ICU"</span><span class="pln"> </span><span class="atn">equiv-text</span><span class="pun">=</span><span class="atv">"{gender, select, male {...} female {...} other {...}}"</span><span class="tag">/&gt;&lt;/</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/trans-unit&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">第一个翻译单元的紧下方就是第二个翻译单元，包含 <code>select</code> 中的消息。照样翻译它。</p><p translation-origin="off">The second translation unit, immediately below the first one, contains the <code>select</code> message. Translate that as well.</p><code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-select-2" header="src/locale/messages.fr.xlf (trans-unit)" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html"&gt; &lt;source&gt;{VAR_SELECT, select, male {male} female {female} other {other} }&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt;</div><header class="ng-star-inserted">src/locale/messages.fr.xlf (trans-unit)</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/locale/messages.fr.xlf (trans-unit)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"eff74b75ab7364b6fa888f1cbfae901aaaf02295"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;source&gt;</span><span class="pln">{VAR_SELECT, select, male {male} female {female} other {other} }</span><span class="tag">&lt;/source&gt;</span><span class="pln">
  </span><span class="tag">&lt;</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }</span><span class="tag">&lt;/</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/trans-unit&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">在翻译之后，它们会放在一起：</p><p translation-origin="off">Here they are together, after translation:</p><code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-select" header="src/locale/messages.fr.xlf (trans-unit)" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;/trans-unit&gt; &lt;trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html"&gt; &lt;source&gt;The author is &lt;x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/&gt;&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;L'auteur est &lt;x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/&gt;&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt; &lt;trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html"&gt; &lt;source&gt;{VAR_SELECT, select, male {male} female {female} other {other} }&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt;</div><header class="ng-star-inserted">src/locale/messages.fr.xlf (trans-unit)</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/locale/messages.fr.xlf (trans-unit)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;/trans-unit&gt;</span><span class="pln">
</span><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"f99f34ac9bd4606345071bd813858dec29f3b7d1"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;source&gt;</span><span class="pln">The author is </span><span class="tag">&lt;x</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"ICU"</span><span class="pln"> </span><span class="atn">equiv-text</span><span class="pun">=</span><span class="atv">"{gender, select, male {...} female {...} other {...}}"</span><span class="tag">/&gt;&lt;/source&gt;</span><span class="pln">
  </span><span class="tag">&lt;</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">L'auteur est </span><span class="tag">&lt;x</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"ICU"</span><span class="pln"> </span><span class="atn">equiv-text</span><span class="pun">=</span><span class="atv">"{gender, select, male {...} female {...} other {...}}"</span><span class="tag">/&gt;&lt;/</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/trans-unit&gt;</span><span class="pln">
</span><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"eff74b75ab7364b6fa888f1cbfae901aaaf02295"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;source&gt;</span><span class="pln">{VAR_SELECT, select, male {male} female {female} other {other} }</span><span class="tag">&lt;/source&gt;</span><span class="pln">
  </span><span class="tag">&lt;</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }</span><span class="tag">&lt;/</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/trans-unit&gt;</span></code>
    </pre></aio-code></code-example><a id="translate-nested"></a><h3 id="translate-a-nested-expression" translation-result="on">翻译嵌套的表达式<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translate-a-nested-expression"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="translate-a-nested-expression">Translate a nested expression<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#translate-a-nested-expression"><i class="material-icons">link</i></a></h3><p translation-result="on">嵌套的表达式和前一节没有什么不同。就像上一个例子中那样，这里有<em>两个</em>翻译单元。 第一个包含嵌套表达式之外的文本：</p><p translation-origin="off">A nested expression is similar to the previous examples. As in the previous example, there are two translation units. The first one contains the text outside of the nested expression:</p><code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-nested-1" header="src/locale/messages.fr.xlf (trans-unit)" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html"&gt; &lt;source&gt;Updated: &lt;x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/&gt;&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;Mis à jour: &lt;x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/&gt;&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt;</div><header class="ng-star-inserted">src/locale/messages.fr.xlf (trans-unit)</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/locale/messages.fr.xlf (trans-unit)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;source&gt;</span><span class="pln">Updated: </span><span class="tag">&lt;x</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"ICU"</span><span class="pln"> </span><span class="atn">equiv-text</span><span class="pun">=</span><span class="atv">"{minutes, plural, =0 {...} =1 {...} other {...}}"</span><span class="tag">/&gt;&lt;/source&gt;</span><span class="pln">
  </span><span class="tag">&lt;</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">Mis à jour: </span><span class="tag">&lt;x</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"ICU"</span><span class="pln"> </span><span class="atn">equiv-text</span><span class="pun">=</span><span class="atv">"{minutes, plural, =0 {...} =1 {...} other {...}}"</span><span class="tag">/&gt;&lt;/</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/trans-unit&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">第二个包含完整的嵌套表达式：</p><p translation-origin="off">The second unit contains the complete nested expression:</p><code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-nested-2" header="src/locale/messages.fr.xlf (trans-unit)" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html"&gt; &lt;source&gt;{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {&lt;x id="INTERPOLATION" equiv-text="{{minutes}}"/&gt; minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y <a href="api/router/RouterLinkWithHref" class="code-anchor">a</a> une minute} other {il y <a href="api/router/RouterLinkWithHref" class="code-anchor">a</a> &lt;x id="INTERPOLATION" equiv-text="{{minutes}}"/&gt; minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt;</div><header class="ng-star-inserted">src/locale/messages.fr.xlf (trans-unit)</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/locale/messages.fr.xlf (trans-unit)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"7151c2e67748b726f0864fc443861d45df21d706"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;source&gt;</span><span class="pln">{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {</span><span class="tag">&lt;x</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"INTERPOLATION"</span><span class="pln"> </span><span class="atn">equiv-text</span><span class="pun">=</span><span class="atv">"{{minutes}}"</span><span class="tag">/&gt;</span><span class="pln"> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</span><span class="tag">&lt;/source&gt;</span><span class="pln">
  </span><span class="tag">&lt;</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y </span><a href="api/router/RouterLinkWithHref" class="code-anchor"><span class="pln">a</span></a><span class="pln"> une minute} other {il y </span><a href="api/router/RouterLinkWithHref" class="code-anchor"><span class="pln">a</span></a><span class="pln"> </span><span class="tag">&lt;x</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"INTERPOLATION"</span><span class="pln"> </span><span class="atn">equiv-text</span><span class="pun">=</span><span class="atv">"{{minutes}}"</span><span class="tag">/&gt;</span><span class="pln"> minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }</span><span class="tag">&lt;/</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/trans-unit&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">放在一起时：</p><p translation-origin="off">And both together:</p><code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-nested" header="src/locale/messages.fr.xlf (trans-unit)" linenums="false" ng-version="7.0.0"><div style="display:none">&lt;trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html"&gt; &lt;source&gt;Updated: &lt;x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/&gt;&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;Mis à jour: &lt;x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/&gt;&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt; &lt;trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html"&gt; &lt;source&gt;{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {&lt;x id="INTERPOLATION" equiv-text="{{minutes}}"/&gt; minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y <a href="api/router/RouterLinkWithHref" class="code-anchor">a</a> une minute} other {il y <a href="api/router/RouterLinkWithHref" class="code-anchor">a</a> &lt;x id="INTERPOLATION" equiv-text="{{minutes}}"/&gt; minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt;</div><header class="ng-star-inserted">src/locale/messages.fr.xlf (trans-unit)</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/locale/messages.fr.xlf (trans-unit)">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;source&gt;</span><span class="pln">Updated: </span><span class="tag">&lt;x</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"ICU"</span><span class="pln"> </span><span class="atn">equiv-text</span><span class="pun">=</span><span class="atv">"{minutes, plural, =0 {...} =1 {...} other {...}}"</span><span class="tag">/&gt;&lt;/source&gt;</span><span class="pln">
  </span><span class="tag">&lt;</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">Mis à jour: </span><span class="tag">&lt;x</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"ICU"</span><span class="pln"> </span><span class="atn">equiv-text</span><span class="pun">=</span><span class="atv">"{minutes, plural, =0 {...} =1 {...} other {...}}"</span><span class="tag">/&gt;&lt;/</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/trans-unit&gt;</span><span class="pln">
</span><span class="tag">&lt;trans-unit</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"7151c2e67748b726f0864fc443861d45df21d706"</span><span class="pln"> </span><span class="atn">datatype</span><span class="pun">=</span><span class="atv">"html"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;source&gt;</span><span class="pln">{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {</span><span class="tag">&lt;x</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"INTERPOLATION"</span><span class="pln"> </span><span class="atn">equiv-text</span><span class="pun">=</span><span class="atv">"{{minutes}}"</span><span class="tag">/&gt;</span><span class="pln"> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</span><span class="tag">&lt;/source&gt;</span><span class="pln">
  </span><span class="tag">&lt;</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y </span><a href="api/router/RouterLinkWithHref" class="code-anchor"><span class="pln">a</span></a><span class="pln"> une minute} other {il y </span><a href="api/router/RouterLinkWithHref" class="code-anchor"><span class="pln">a</span></a><span class="pln"> </span><span class="tag">&lt;x</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"INTERPOLATION"</span><span class="pln"> </span><span class="atn">equiv-text</span><span class="pun">=</span><span class="atv">"{{minutes}}"</span><span class="tag">/&gt;</span><span class="pln"> minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }</span><span class="tag">&lt;/</span><a href="api/router/RouterLinkWithHref#target" class="code-anchor"><span class="tag">target</span></a><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/trans-unit&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on">整个模板的翻译就完成了。下一节会讲如何翻译结果加载到应用程序中。</p><p translation-origin="off">The entire template translation is complete. The next section describes how to load that translation into the app.</p><a id="app-pre-translation"></a><h3 id="the-app-and-its-translation-file" translation-result="on">应用及其翻译文件<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#the-app-and-its-translation-file"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="the-app-and-its-translation-file">The app and its translation file<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#the-app-and-its-translation-file"><i class="material-icons">link</i></a></h3><p translation-result="on">下面是例子应用及其翻译文件：</p><p translation-origin="off">The sample app and its translation file are now as follows:</p><code-tabs ng-version="7.0.0"><div style="display:none"><code-pane header="src/app/app.component.html" path="i18n/src/app/app.component.html">&lt;h1 i18n="<a href="api/common/http/HttpEventType#User" class="code-anchor">User</a> welcome|An introduction header for this sample@@introductionHeader"&gt; Hello i18n! &lt;/h1&gt; &lt;ng-container i18n&gt;I don't output any element&lt;/ng-container&gt; &lt;br /&gt; &lt;img [src]="logo" i18n-title title="Angular logo" /&gt; &lt;br&gt; &lt;button (click)="inc(1)"&gt;+&lt;/button&gt; &lt;button (click)="inc(-1)"&gt;-&lt;/button&gt; &lt;span i18n&gt;Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}&lt;/span&gt; ({{minutes}}) &lt;br&gt;&lt;br&gt; &lt;button (click)="male()"&gt;&amp;#9794;&lt;/button&gt; &lt;button (click)="female()"&gt;&amp;#9792;&lt;/button&gt; &lt;button (click)="other()"&gt;&amp;#9895;&lt;/button&gt; &lt;span i18n&gt;The author is {gender, select, male {male} female {female} other {other}}&lt;/span&gt; &lt;br&gt;&lt;br&gt; &lt;span i18n&gt;Updated: {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago by {gender, select, male {male} female {female} other {other}}}} &lt;/span&gt;</code-pane><code-pane header="src/app/app.component.ts" path="i18n/src/app/app.component.ts">import { <a href="api/core/Component" class="code-anchor">Component</a> } from '@angular/core'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { minutes = 0; gender = 'female'; fly = true; logo = 'https://angular.io/assets/images/logos/angular/angular.png'; heroes: string[] = ['Magneta', 'Celeritas', 'Dynama']; inc(i: number) { this.minutes = Math.min(5, Math.max(0, this.minutes + i)); } male() { this.gender = 'male'; } female() { this.gender = 'female'; } other() { this.gender = 'other'; } }</code-pane><code-pane header="src/app/app.module.ts" path="i18n/src/app/app.module.ts">import { <a href="api/core/NgModule" class="code-anchor">NgModule</a> } from '@angular/core'; import { <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ <a href="api/core/NgModule#imports" class="code-anchor">imports</a>: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> ], <a href="api/core/NgModule#declarations" class="code-anchor">declarations</a>: [ AppComponent ], <a href="api/core/NgModule#bootstrap" class="code-anchor">bootstrap</a>: [ AppComponent ] }) export class AppModule { }</code-pane><code-pane header="src/main.ts" path="i18n/doc-files/main.1.ts">import { <a href="api/core/enableProdMode" class="code-anchor">enableProdMode</a> } from '@angular/core'; import { <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a> } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { <a href="api/core/enableProdMode" class="code-anchor">enableProdMode</a>(); } <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a>().bootstrapModule(AppModule);</code-pane><code-pane header="src/locale/messages.fr.xlf" path="i18n/doc-files/messages.fr.xlf.html">&lt;?xml version="1.0" encoding="UTF-8" ?&gt; &lt;xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:<a href="api/platform-server/PlatformConfig#document" class="code-anchor">document</a>:1.2"&gt; &lt;file source-language="en" datatype="plaintext" original="ng2.template"&gt; &lt;body&gt; &lt;trans-unit id="introductionHeader" datatype="html"&gt; &lt;source&gt;Hello i18n!&lt;/source&gt; &lt;note priority="1" from="description"&gt;An introduction header for this sample&lt;/note&gt; &lt;note priority="1" from="meaning"&gt;<a href="api/common/http/HttpEventType#User" class="code-anchor">User</a> welcome&lt;/note&gt; &lt;/trans-unit&gt; &lt;trans-unit id="introductionHeader" datatype="html"&gt; &lt;source&gt;Hello i18n!&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;Bonjour i18n !&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;note priority="1" from="description"&gt;An introduction header for this sample&lt;/note&gt; &lt;note priority="1" from="meaning"&gt;<a href="api/common/http/HttpEventType#User" class="code-anchor">User</a> welcome&lt;/note&gt; &lt;/trans-unit&gt; &lt;trans-unit id="ba0cc104d3d69bf669f97b8d96a4c5d8d9559aa3" datatype="html"&gt; &lt;source&gt;I don&amp;apos;t output any element&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;Je n'affiche aucun élément&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt; &lt;trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html"&gt; &lt;source&gt;Angular logo&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;Logo d'Angular&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt; &lt;trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html"&gt; &lt;source&gt;{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {&lt;x id="INTERPOLATION" equiv-text="{{minutes}}"/&gt; minutes ago} }&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y <a href="api/router/RouterLinkWithHref" class="code-anchor">a</a> une minute} other {il y <a href="api/router/RouterLinkWithHref" class="code-anchor">a</a> &lt;x id="INTERPOLATION" equiv-text="{{minutes}}"/&gt; minutes} }&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt; &lt;/trans-unit&gt; &lt;trans-unit id="f99f34ac9bd4606345071bd813858dec29f3b7d1" datatype="html"&gt; &lt;source&gt;The author is &lt;x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/&gt;&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;L'auteur est &lt;x id="ICU" equiv-text="{gender, select, male {...} female {...} other {...}}"/&gt;&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt; &lt;trans-unit id="eff74b75ab7364b6fa888f1cbfae901aaaf02295" datatype="html"&gt; &lt;source&gt;{VAR_SELECT, select, male {male} female {female} other {other} }&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;{VAR_SELECT, select, male {un homme} female {une femme} other {autre} }&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt; &lt;trans-unit id="972cb0cf3e442f7b1c00d7dab168ac08d6bdf20c" datatype="html"&gt; &lt;source&gt;Updated: &lt;x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/&gt;&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;Mis à jour: &lt;x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/&gt;&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt; &lt;trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html"&gt; &lt;source&gt;{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {&lt;x id="INTERPOLATION" equiv-text="{{minutes}}"/&gt; minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }&lt;/source&gt; &lt;<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt;{VAR_PLURAL, plural, =0 {à l'instant} =1 {il y <a href="api/router/RouterLinkWithHref" class="code-anchor">a</a> une minute} other {il y <a href="api/router/RouterLinkWithHref" class="code-anchor">a</a> &lt;x id="INTERPOLATION" equiv-text="{{minutes}}"/&gt; minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }&lt;/<a href="api/router/RouterLinkWithHref#target" class="code-anchor">target</a>&gt; &lt;/trans-unit&gt; &lt;/body&gt; &lt;/file&gt; &lt;/xliff&gt;</code-pane></div><mat-card class="mat-card"><mat-tab-group class="code-tab-group mat-tab-group mat-primary" disableripple=""><mat-tab-header class="mat-tab-header mat-tab-header-pagination-controls-enabled"><div aria-hidden="true" class="mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-ripple mat-tab-header-pagination-disabled" mat-ripple=""><div class="mat-tab-header-pagination-chevron"></div></div><div class="mat-tab-label-container"><div class="mat-tab-list" role="tablist" style="transform:translateX(0)"><div class="mat-tab-labels"><div cdkmonitorelementfocus="" class="mat-tab-label mat-ripple mat-tab-label-active ng-star-inserted" mat-ripple="" mattablabelwrapper="" role="tab" id="mat-tab-label-0-0" tabindex="0" aria-posinset="1" aria-setsize="5" aria-controls="mat-tab-content-0-0" aria-selected="true" aria-disabled="false"><div class="mat-tab-label-content"><span class="ng-star-inserted">src/app/app.component.html</span></div></div><div cdkmonitorelementfocus="" class="mat-tab-label mat-ripple ng-star-inserted" mat-ripple="" mattablabelwrapper="" role="tab" id="mat-tab-label-0-1" tabindex="-1" aria-posinset="2" aria-setsize="5" aria-controls="mat-tab-content-0-1" aria-selected="false" aria-disabled="false"><div class="mat-tab-label-content"><span class="ng-star-inserted">src/app/app.component.ts</span></div></div><div cdkmonitorelementfocus="" class="mat-tab-label mat-ripple ng-star-inserted" mat-ripple="" mattablabelwrapper="" role="tab" id="mat-tab-label-0-2" tabindex="-1" aria-posinset="3" aria-setsize="5" aria-controls="mat-tab-content-0-2" aria-selected="false" aria-disabled="false"><div class="mat-tab-label-content"><span class="ng-star-inserted">src/app/app.module.ts</span></div></div><div cdkmonitorelementfocus="" class="mat-tab-label mat-ripple ng-star-inserted" mat-ripple="" mattablabelwrapper="" role="tab" id="mat-tab-label-0-3" tabindex="-1" aria-posinset="4" aria-setsize="5" aria-controls="mat-tab-content-0-3" aria-selected="false" aria-disabled="false"><div class="mat-tab-label-content"><span class="ng-star-inserted">src/main.ts</span></div></div><div cdkmonitorelementfocus="" class="mat-tab-label mat-ripple ng-star-inserted" mat-ripple="" mattablabelwrapper="" role="tab" id="mat-tab-label-0-4" tabindex="-1" aria-posinset="5" aria-setsize="5" aria-controls="mat-tab-content-0-4" aria-selected="false" aria-disabled="false"><div class="mat-tab-label-content"><span class="ng-star-inserted">src/locale/messages.fr.xlf</span></div></div></div><mat-ink-bar class="mat-ink-bar" style="visibility:visible;left:0;width:225px"></mat-ink-bar></div></div><div aria-hidden="true" class="mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4 mat-ripple" mat-ripple=""><div class="mat-tab-header-pagination-chevron"></div></div></mat-tab-header><div class="mat-tab-body-wrapper"><mat-tab-body class="mat-tab-body ng-tns-c12-2 mat-tab-body-active ng-star-inserted" role="tabpanel" id="mat-tab-content-0-0" aria-labelledby="mat-tab-label-0-0"><div class="mat-tab-body-content ng-trigger ng-trigger-translateTab" style="transform:none"><aio-code class="ng-star-inserted" style=""><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><ol class="linenums"><li class="L0"><span class="tag">&lt;h1</span><span class="pln"> </span><span class="atn">i18n</span><span class="pun">=</span><span class="atv">"</span><a href="api/common/http/HttpEventType#User" class="code-anchor"><span class="atv">User</span></a><span class="atv"> welcome|An introduction header for this sample@@introductionHeader"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  Hello i18n!</span></li><li class="L2"><span class="tag">&lt;/h1&gt;</span></li><li class="L3"><span class="pln">&nbsp;</span></li><li class="L4"><span class="tag">&lt;ng-container</span><span class="pln"> </span><span class="atn">i18n</span><span class="tag">&gt;</span><span class="pln">I don't output any element</span><span class="tag">&lt;/ng-container&gt;</span></li><li class="L5"><span class="pln">&nbsp;</span></li><li class="L6"><span class="tag">&lt;br</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L7"><span class="pln">&nbsp;</span></li><li class="L8"><span class="tag">&lt;img</span><span class="pln"> [</span><span class="atn">src</span><span class="pln">]</span><span class="pun">=</span><span class="atv">"logo"</span><span class="pln"> </span><span class="atn">i18n-title</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"Angular logo"</span><span class="pln"> </span><span class="tag">/&gt;</span></li><li class="L9"><span class="tag">&lt;br&gt;</span></li><li class="L0"><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"inc(1)"</span><span class="tag">&gt;</span><span class="pln">+</span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"inc(-1)"</span><span class="tag">&gt;</span><span class="pln">-</span><span class="tag">&lt;/button&gt;</span></li><li class="L1"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">i18n</span><span class="tag">&gt;</span><span class="pln">Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}</span><span class="tag">&lt;/span&gt;</span></li><li class="L2"><span class="pln">({{minutes}})</span></li><li class="L3"><span class="tag">&lt;br&gt;&lt;br&gt;</span></li><li class="L4"><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"male()"</span><span class="tag">&gt;</span><span class="pln">&amp;#9794;</span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"female()"</span><span class="tag">&gt;</span><span class="pln">&amp;#9792;</span><span class="tag">&lt;/button&gt;</span><span class="pln"> </span><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"other()"</span><span class="tag">&gt;</span><span class="pln">&amp;#9895;</span><span class="tag">&lt;/button&gt;</span></li><li class="L5"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">i18n</span><span class="tag">&gt;</span><span class="pln">The author is {gender, select, male {male} female {female} other {other}}</span><span class="tag">&lt;/span&gt;</span></li><li class="L6"><span class="tag">&lt;br&gt;&lt;br&gt;</span></li><li class="L7"><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">i18n</span><span class="tag">&gt;</span><span class="pln">Updated: {minutes, plural,</span></li><li class="L8"><span class="pln">  =0 {just now}</span></li><li class="L9"><span class="pln">  =1 {one minute ago}</span></li><li class="L0"><span class="pln">  other {{{minutes}} minutes ago by {gender, select, male {male} female {female} other {other}}}}</span></li><li class="L1"><span class="tag">&lt;/span&gt;</span></li></ol></code>
    </pre></aio-code></div></mat-tab-body><mat-tab-body class="mat-tab-body ng-tns-c12-3 ng-star-inserted" role="tabpanel" id="mat-tab-content-0-1" aria-labelledby="mat-tab-label-0-1"><div class="mat-tab-body-content ng-trigger ng-trigger-translateTab" style="transform:translate3d(100%,0,0);min-height:1px"></div></mat-tab-body><mat-tab-body class="mat-tab-body ng-tns-c12-4 ng-star-inserted" role="tabpanel" id="mat-tab-content-0-2" aria-labelledby="mat-tab-label-0-2"><div class="mat-tab-body-content ng-trigger ng-trigger-translateTab" style="transform:translate3d(100%,0,0);min-height:1px"></div></mat-tab-body><mat-tab-body class="mat-tab-body ng-tns-c12-5 ng-star-inserted" role="tabpanel" id="mat-tab-content-0-3" aria-labelledby="mat-tab-label-0-3"><div class="mat-tab-body-content ng-trigger ng-trigger-translateTab" style="transform:translate3d(100%,0,0);min-height:1px"></div></mat-tab-body><mat-tab-body class="mat-tab-body ng-tns-c12-6 ng-star-inserted" role="tabpanel" id="mat-tab-content-0-4" aria-labelledby="mat-tab-label-0-4"><div class="mat-tab-body-content ng-trigger ng-trigger-translateTab" style="transform:translate3d(100%,0,0);min-height:1px"></div></mat-tab-body></div></mat-tab-group></mat-card></code-tabs><a id="merge"></a><h2 id="merge-the-completed-translation-file-into-the-app" translation-result="on">合并已经翻译的文件<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#merge-the-completed-translation-file-into-the-app"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="merge-the-completed-translation-file-into-the-app">Merge the completed translation file into the app<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#merge-the-completed-translation-file-into-the-app"><i class="material-icons">link</i></a></h2><p translation-result="on">要把已经翻译的文件合并到组件模板，就要用翻译过的文件编译应用。</p><p translation-origin="off">To merge the translated text into component templates, compile the app with the completed translation file.</p><p translation-result="on">为 Angular 编译器提供三种与翻译有关的信息：</p><p translation-origin="off">Provide the Angular compiler with three translation-specific pieces of information:</p><ul><li><p translation-result="on">翻译文件</p><p translation-origin="off">The translation file.</p></li><li><p translation-result="on">翻译文件的格式</p><p translation-origin="off">The translation file format.</p></li><li><p translation-result="on">目标地区（比如 <code>fr</code> 或 <code>en-US</code>）。</p><p translation-origin="off">The locale (<code>fr</code> or <code>en-US</code> for instance).</p></li></ul><p translation-result="on">无论翻译文件是 <code>.xlf</code> 还是 Angular 支持的其它格式（比如 <code>.xtb</code>），其编译过程都是一样的。</p><p translation-origin="off">The compilation process is the same whether the translation file is in <code>.xlf</code> format or in another format that Angular understands, such as <code>.xtb</code>.</p><p translation-result="on">你如何提供这些信息取决于你使用的是JIT（即时）编译器还是AOT（预先）编译器。</p><p translation-origin="off">How you provide this information depends upon whether you compile with the JIT compiler or the AOT compiler.</p><ul><li><p translation-result="on">使用<a href="guide/i18n#merge-aot">AOT</a>时，用配置项传入这些配置信息。</p><p translation-origin="off">With <a href="guide/i18n#merge-aot">AOT</a>, you pass the information as configuration settings.</p></li><li><p translation-result="on">使用<a href="guide/i18n#merge-jit">JIT</a>时，在引导时提供。</p><p translation-origin="off">With <a href="guide/i18n#merge-jit">JIT</a>, you provide the information at bootstrap time.</p></li></ul><a id="merge-aot"></a><h3 id="merge-with-the-aot-compiler" translation-result="on">使用 AOT 编译器合并<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#merge-with-the-aot-compiler"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="merge-with-the-aot-compiler">Merge with the AOT compiler<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#merge-with-the-aot-compiler"><i class="material-icons">link</i></a></h3><p translation-result="on">AOT（<em>预先</em>）编译器是构建过程的一部分，它可以生成又小又快，直接可用的应用包，通常是打产品包。</p><p translation-origin="off">The <a href="guide/glossary#aot">AOT compiler</a> is part of a build process that produces a small, fast, ready-to-run application package, typically for production.</p><p translation-result="on">当你使用 AOT 编译器进行国际化时，你必须为每种语言预先编译一个独立的应用包，并且依靠服务端语言检测或 URL 参数来找出合适的包。</p><p translation-origin="off">When you internationalize with the AOT compiler, you must pre-build a separate application package for each language and serve the appropriate package based on either server-side language detection or url parameters.</p><p translation-result="on">你还要指示 AOT 编译器使用你的翻译配置，要这么做，你就要在 <code>angular.json</code> 文件中使用三个 "i18n" 构建选项来配置翻译信息。</p><p translation-origin="off">To instruct the AOT compiler to use your translation configuration, set the three "i18n" build configuration options in your <code>angular.json</code> file.</p><ul><li><p translation-result="on"> <code>i18nFile</code>: 翻译文件的路径。</p><p translation-origin="off"><code>i18nFile</code>: the path to the translation file.</p></li><li><p translation-result="on"> <code>i18nFormat</code>: 翻译文件的格式。</p><p translation-origin="off"><code>i18nFormat</code>: the format of the translation file.</p></li><li><p translation-result="on"> <code>i18nLocale</code>: 地区的 id.</p><p translation-origin="off"><code>i18nLocale</code>: the locale id.</p></li></ul><p translation-result="on">你还可以通过设置 <code>outputPath</code> 选项来把输出指向一个区域相关的目录，以便把应用的不同本地化版本分离开。</p><p translation-origin="off">You should also direct the output to a locale-specific folder to keep it separate from other locale versions of your app, by setting the <code>outputPath</code> configuration option.</p><code-example ng-version="7.0.0"><div style="display:none">"build": { ... "configurations": { ... "fr": { "aot": true, "outputPath": "dist/my-project-fr/", "i18nFile": "src/<a href="api/common/NgLocaleLocalization#locale" class="code-anchor">locale</a>/messages.fr.xlf", "i18nFormat": "xlf", "i18nLocale": "fr", ... } } }, "serve": { ... "configurations": { ... "fr": { "browserTarget": "*project-name*:build:fr" } } }</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><ol class="linenums"><li class="L0"><span class="str">"build"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></li><li class="L1"><span class="pln">  </span><span class="pun">...</span></li><li class="L2"><span class="pln">  </span><span class="str">"configurations"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></li><li class="L3"><span class="pln">    </span><span class="pun">...</span></li><li class="L4"><span class="pln">    </span><span class="str">"fr"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></li><li class="L5"><span class="pln">      </span><span class="str">"aot"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span></li><li class="L6"><span class="pln">      </span><span class="str">"outputPath"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"dist/my-project-fr/"</span><span class="pun">,</span></li><li class="L7"><span class="pln">      </span><span class="str">"i18nFile"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"src/</span><a href="api/common/NgLocaleLocalization#locale" class="code-anchor"><span class="str">locale</span></a><span class="str">/messages.fr.xlf"</span><span class="pun">,</span></li><li class="L8"><span class="pln">      </span><span class="str">"i18nFormat"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"xlf"</span><span class="pun">,</span></li><li class="L9"><span class="pln">      </span><span class="str">"i18nLocale"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"fr"</span><span class="pun">,</span></li><li class="L0"><span class="pln">      </span><span class="pun">...</span></li><li class="L1"><span class="pln">    </span><span class="pun">}</span></li><li class="L2"><span class="pln">  </span><span class="pun">}</span></li><li class="L3"><span class="pun">},</span></li><li class="L4"><span class="str">"serve"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></li><li class="L5"><span class="pln">  </span><span class="pun">...</span></li><li class="L6"><span class="pln">  </span><span class="str">"configurations"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></li><li class="L7"><span class="pln">    </span><span class="pun">...</span></li><li class="L8"><span class="pln">    </span><span class="str">"fr"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></li><li class="L9"><span class="pln">      </span><span class="str">"browserTarget"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"*project-name*:build:fr"</span></li><li class="L0"><span class="pln">    </span><span class="pun">}</span></li><li class="L1"><span class="pln">  </span><span class="pun">}</span></li><li class="L2"><span class="pun">}</span></li></ol></code>
    </pre></aio-code></code-example><p translation-result="on">你可以通过 <code>ng serve</code> 或 <code>ng build</code> 命令来传入这些配置项。 下面的例子演示了如何使用前面部分创建的法语文件来启动开发服务器：</p><p translation-origin="off">You can then pass this configuration to the <code>ng serve</code> or <code>ng build</code> commands. The example below shows how to serve the French language file created in previous sections of this guide:</p><code-example language="sh" class="code-shell" ng-version="7.0.0"><div style="display:none">ng serve --configuration=fr</div><aio-code><pre class="prettyprint lang-sh">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng serve </span><span class="pun">--</span><span class="pln">configuration</span><span class="pun">=</span><span class="pln">fr</span></code>
    </pre></aio-code></code-example><p translation-result="on">要进行产品环境构建，就要在 CLI 的配置文件 <code>angular.json</code> 中定义一个独立的 <code>production-fr</code> 构建选项。</p><p translation-origin="off">For production builds, you define a separate <code>production-fr</code> build configuration in the CLI configuration file, <code>angular.json</code>.</p><code-example ng-version="7.0.0"><div style="display:none">... "architect": { "build": { "builder": "@angular-devkit/build-angular:<a href="api/animations/browser" class="code-anchor">browser</a>", "options": { ... }, "configurations": { "fr": { "aot": true, "outputPath": "dist/my-project-fr/", "i18nFile": "src/<a href="api/common/NgLocaleLocalization#locale" class="code-anchor">locale</a>/messages.fr.xlf", "i18nFormat": "xlf", "i18nLocale": "fr", "i18nMissingTranslation": "error", } // ... "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "my-project:build" }, "configurations": { "production": { "browserTarget": "my-project:build:production" }, "fr": { "browserTarget": "my-project:build:fr" } } },</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><ol class="linenums"><li class="L0"><span class="pun">...</span></li><li class="L1"><span class="str">"architect"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></li><li class="L2"><span class="pln">  </span><span class="str">"build"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></li><li class="L3"><span class="pln">    </span><span class="str">"builder"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"@angular-devkit/build-angular:</span><a href="api/animations/browser" class="code-anchor"><span class="str">browser</span></a><span class="str">"</span><span class="pun">,</span></li><li class="L4"><span class="pln">    </span><span class="str">"options"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">},</span></li><li class="L5"><span class="pln">    </span><span class="str">"configurations"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></li><li class="L6"><span class="pln">      </span><span class="str">"fr"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></li><li class="L7"><span class="pln">        </span><span class="str">"aot"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span></li><li class="L8"><span class="pln">        </span><span class="str">"outputPath"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"dist/my-project-fr/"</span><span class="pun">,</span></li><li class="L9"><span class="pln">        </span><span class="str">"i18nFile"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"src/</span><a href="api/common/NgLocaleLocalization#locale" class="code-anchor"><span class="str">locale</span></a><span class="str">/messages.fr.xlf"</span><span class="pun">,</span></li><li class="L0"><span class="pln">        </span><span class="str">"i18nFormat"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"xlf"</span><span class="pun">,</span></li><li class="L1"><span class="pln">        </span><span class="str">"i18nLocale"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"fr"</span><span class="pun">,</span></li><li class="L2"><span class="pln">        </span><span class="str">"i18nMissingTranslation"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"error"</span><span class="pun">,</span></li><li class="L3"><span class="pln">      </span><span class="pun">}</span></li><li class="L4"><span class="com">// ...</span></li><li class="L5"><span class="str">"serve"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></li><li class="L6"><span class="pln">  </span><span class="str">"builder"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"@angular-devkit/build-angular:dev-server"</span><span class="pun">,</span></li><li class="L7"><span class="pln">  </span><span class="str">"options"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></li><li class="L8"><span class="pln">    </span><span class="str">"browserTarget"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"my-project:build"</span></li><li class="L9"><span class="pln">  </span><span class="pun">},</span></li><li class="L0"><span class="pln">  </span><span class="str">"configurations"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></li><li class="L1"><span class="pln">    </span><span class="str">"production"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></li><li class="L2"><span class="pln">      </span><span class="str">"browserTarget"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"my-project:build:production"</span></li><li class="L3"><span class="pln">    </span><span class="pun">},</span></li><li class="L4"><span class="pln">    </span><span class="str">"fr"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></li><li class="L5"><span class="pln">      </span><span class="str">"browserTarget"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"my-project:build:fr"</span></li><li class="L6"><span class="pln">    </span><span class="pun">}</span></li><li class="L7"><span class="pln">  </span><span class="pun">}</span></li><li class="L8"><span class="pun">},</span></li></ol></code>
    </pre></aio-code></code-example><p translation-result="on">这些配置项还可以通过 CLI 参数和现有的 <code>production</code> 配置来提供。</p><p translation-origin="off">The same configuration options can also be provided through the CLI with your existing <code>production</code> configuration.</p><code-example language="sh" class="code-shell" ng-version="7.0.0"><div style="display:none">ng build --prod --i18n-file src/<a href="api/common/NgLocaleLocalization#locale" class="code-anchor">locale</a>/messages.fr.xlf --i18n-format xlf --i18n-locale fr</div><aio-code><pre class="prettyprint lang-sh">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pln">ng build </span><span class="pun">--</span><span class="pln">prod </span><span class="pun">--</span><span class="pln">i18n</span><span class="pun">-</span><span class="pln">file src</span><span class="pun">/</span><a href="api/common/NgLocaleLocalization#locale" class="code-anchor"><span class="pln">locale</span></a><span class="pun">/</span><span class="pln">messages</span><span class="pun">.</span><span class="pln">fr</span><span class="pun">.</span><span class="pln">xlf </span><span class="pun">--</span><span class="pln">i18n</span><span class="pun">-</span><span class="pln">format xlf </span><span class="pun">--</span><span class="pln">i18n</span><span class="pun">-</span><span class="pln">locale fr</span></code>
    </pre></aio-code></code-example><a id="merge-jit"></a><h3 id="merge-with-the-jit-compiler" translation-result="on">用 JIT 编译器合并<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#merge-with-the-jit-compiler"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="merge-with-the-jit-compiler">Merge with the JIT compiler<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#merge-with-the-jit-compiler"><i class="material-icons">link</i></a></h3><p translation-result="on">加载应用程序时，<a href="guide/glossary#jit">即时（JIT）编译器</a>会在浏览器中编译应用。 在使用 JIT 编译器的环境中翻译是一个动态的流程，包括：</p><p translation-origin="off">The <a href="guide/glossary#jit">JIT compiler</a> compiles your app in the browser as the app loads. To support translation with the JIT compiler, you must do the following:</p><ol><li><p translation-result="on">把合适的语言翻译文件导入成一个字符串常量</p><p translation-origin="off">Import the appropriate language translation file as a string constant.</p></li><li><p translation-result="on">为 JIT 编译器创建相应的翻译提供商。</p><p translation-origin="off">Create corresponding translation providers for the JIT compiler.</p></li><li><p translation-result="on">使用这些提供商来启动应用。</p><p translation-origin="off">Bootstrap the app with those providers.</p></li></ol><p translation-result="on">三种提供商帮助 JIT 编译在编译应用时，将模板文本翻译到某种语言：</p><p translation-origin="off">Three providers tell the JIT compiler how to translate the template texts for a particular language while compiling the app:</p><ul><li><p translation-result="on"> <code><a href="api/core/TRANSLATIONS" class="code-anchor">TRANSLATIONS</a></code> 是含有翻译文件内容的字符串。</p><p translation-origin="off"><code><a href="api/core/TRANSLATIONS" class="code-anchor">TRANSLATIONS</a></code> is a string containing the content of the translation file.</p></li><li><p translation-result="on"> <code><a href="api/core/TRANSLATIONS_FORMAT" class="code-anchor">TRANSLATIONS_FORMAT</a></code> 是文件的格式: <code>xlf</code>、<code>xlif</code> 或 <code>xtb</code>。</p><p translation-origin="off"><code><a href="api/core/TRANSLATIONS_FORMAT" class="code-anchor">TRANSLATIONS_FORMAT</a></code> is the format of the file: <code>xlf</code>, <code>xlf2</code>, or <code>xtb</code>.</p></li><li><p translation-result="on"> <code><a href="api/core/LOCALE_ID" class="code-anchor">LOCALE_ID</a></code> 是目标语言的语言环境。</p><p translation-origin="off"><code><a href="api/core/LOCALE_ID" class="code-anchor">LOCALE_ID</a></code> is the locale of the target language.</p></li></ul><p translation-result="on">Angular 的 <code>bootstrapModule</code> 方法具有第二参数 <code>compilerOptions</code>，它可以影响编译器的行为。你可以用它来指定翻译提供商：</p><p translation-origin="off">The Angular <code>bootstrapModule</code> method has a second <code>compilerOptions</code> parameter that can influence the behavior of the compiler. You can use it to specify the translation providers:</p><code-example path="i18n/doc-files/main.2.ts" header="src/main.ts" ng-version="7.0.0"><div style="display:none">import { <a href="api/core/enableProdMode" class="code-anchor">enableProdMode</a>, <a href="api/core/TRANSLATIONS" class="code-anchor">TRANSLATIONS</a>, <a href="api/core/TRANSLATIONS_FORMAT" class="code-anchor">TRANSLATIONS_FORMAT</a> } from '@angular/core'; import { <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a> } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { <a href="api/core/enableProdMode" class="code-anchor">enableProdMode</a>(); } // use the require method provided by webpack declare const require; // we use the webpack raw-loader to return the content as <a href="api/router/RouterLinkWithHref" class="code-anchor">a</a> string const translations = require(`raw-loader!./<a href="api/common/NgLocaleLocalization#locale" class="code-anchor">locale</a>/messages.fr.xlf`); <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a>().bootstrapModule(AppModule, { providers: [ {provide: <a href="api/core/TRANSLATIONS" class="code-anchor">TRANSLATIONS</a>, useValue: translations}, {provide: <a href="api/core/TRANSLATIONS_FORMAT" class="code-anchor">TRANSLATIONS_FORMAT</a>, useValue: 'xlf'} ] });</div><header class="ng-star-inserted">src/main.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/main.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><ol class="linenums"><li class="L0"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/enableProdMode" class="code-anchor"><span class="pln">enableProdMode</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/TRANSLATIONS" class="code-anchor"><span class="pln">TRANSLATIONS</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/TRANSLATIONS_FORMAT" class="code-anchor"><span class="pln">TRANSLATIONS_FORMAT</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span></li><li class="L1"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor"><span class="pln">platformBrowserDynamic</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser-dynamic'</span><span class="pun">;</span></li><li class="L2"><span class="pln">&nbsp;</span></li><li class="L3"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app/app.module'</span><span class="pun">;</span></li><li class="L4"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> environment </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./environments/environment'</span><span class="pun">;</span></li><li class="L5"><span class="pln">&nbsp;</span></li><li class="L6"><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">environment</span><span class="pun">.</span><span class="pln">production</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></li><li class="L7"><span class="pln">  </span><a href="api/core/enableProdMode" class="code-anchor"><span class="pln">enableProdMode</span></a><span class="pun">();</span></li><li class="L8"><span class="pun">}</span></li><li class="L9"><span class="pln">&nbsp;</span></li><li class="L0"><span class="com">// use the require method provided by webpack</span></li><li class="L1"><span class="pln">declare </span><span class="kwd">const</span><span class="pln"> </span><span class="kwd">require</span><span class="pun">;</span></li><li class="L2"><span class="com">// we use the webpack raw-loader to return the content as </span><a href="api/router/RouterLinkWithHref" class="code-anchor"><span class="com">a</span></a><span class="com"> string</span></li><li class="L3"><span class="kwd">const</span><span class="pln"> translations </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">require</span><span class="pun">(</span><span class="str">`raw-loader!./</span><a href="api/common/NgLocaleLocalization#locale" class="code-anchor"><span class="str">locale</span></a><span class="str">/messages.fr.xlf`</span><span class="pun">);</span></li><li class="L4"><span class="pln">&nbsp;</span></li><li class="L5"><a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor"><span class="pln">platformBrowserDynamic</span></a><span class="pun">().</span><span class="pln">bootstrapModule</span><span class="pun">(</span><span class="typ">AppModule</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span></li><li class="L6"><span class="pln">  providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span></li><li class="L7"><span class="pln">    </span><span class="pun">{</span><span class="pln">provide</span><span class="pun">:</span><span class="pln"> </span><a href="api/core/TRANSLATIONS" class="code-anchor"><span class="pln">TRANSLATIONS</span></a><span class="pun">,</span><span class="pln"> useValue</span><span class="pun">:</span><span class="pln"> translations</span><span class="pun">},</span></li><li class="L8"><span class="pln">    </span><span class="pun">{</span><span class="pln">provide</span><span class="pun">:</span><span class="pln"> </span><a href="api/core/TRANSLATIONS_FORMAT" class="code-anchor"><span class="pln">TRANSLATIONS_FORMAT</span></a><span class="pun">,</span><span class="pln"> useValue</span><span class="pun">:</span><span class="pln"> </span><span class="str">'xlf'</span><span class="pun">}</span></li><li class="L9"><span class="pln">  </span><span class="pun">]</span></li><li class="L0"><span class="pun">});</span></li></ol></code>
    </pre></aio-code></code-example><p translation-result="on">然后在主文件包中提供 <code><a href="api/core/LOCALE_ID" class="code-anchor">LOCALE_ID</a></code>：</p><p translation-origin="off">Then provide the <code><a href="api/core/LOCALE_ID" class="code-anchor">LOCALE_ID</a></code> in the main module:</p><code-example path="i18n/doc-files/app.module.ts" header="src/app/app.module.ts" linenums="false" ng-version="7.0.0"><div style="display:none">import { <a href="api/core/LOCALE_ID" class="code-anchor">LOCALE_ID</a>, <a href="api/core/NgModule" class="code-anchor">NgModule</a> } from '@angular/core'; import { <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> } from '@angular/platform-browser'; import { AppComponent } from '../src/app/app.component'; @<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ <a href="api/core/NgModule#imports" class="code-anchor">imports</a>: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a> ], <a href="api/core/NgModule#declarations" class="code-anchor">declarations</a>: [ AppComponent ], providers: [ { provide: <a href="api/core/LOCALE_ID" class="code-anchor">LOCALE_ID</a>, useValue: 'fr' } ], <a href="api/core/NgModule#bootstrap" class="code-anchor">bootstrap</a>: [ AppComponent ] }) export class AppModule { }</div><header class="ng-star-inserted">src/app/app.module.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/app/app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/LOCALE_ID" class="code-anchor"><span class="pln">LOCALE_ID</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/NgModule" class="code-anchor"><span class="typ">NgModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../src/app/app.component'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  </span><a href="api/core/NgModule#imports" class="code-anchor"><span class="pln">imports</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pln"> </span><span class="pun">],</span><span class="pln">
  </span><a href="api/core/NgModule#declarations" class="code-anchor"><span class="pln">declarations</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">],</span><span class="pln">
  providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> provide</span><span class="pun">:</span><span class="pln"> </span><a href="api/core/LOCALE_ID" class="code-anchor"><span class="pln">LOCALE_ID</span></a><span class="pun">,</span><span class="pln"> useValue</span><span class="pun">:</span><span class="pln"> </span><span class="str">'fr'</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">],</span><span class="pln">
  </span><a href="api/core/NgModule#bootstrap" class="code-anchor"><span class="pln">bootstrap</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="typ">AppComponent</span><span class="pln"> </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><a id="missing-translation"></a><h3 id="report-missing-translations" translation-result="on">汇报缺失的翻译<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#report-missing-translations"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="report-missing-translations">Report missing translations<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#report-missing-translations"><i class="material-icons">link</i></a></h3><p translation-result="on">默认情况下，如果缺少了某个翻译文件，构建工具会成功但给出警告（如<code>Missing translation for <a href="api/common/http/HttpErrorResponse#message" class="code-anchor">message</a> "foo"</code>）。你可以配置 Angular 编译器生成的警告级别：</p><p translation-origin="off">By default, when a translation is missing, the build succeeds but generates a warning such as <code>Missing translation for <a href="api/common/http/HttpErrorResponse#message" class="code-anchor">message</a> "foo"</code>. You can configure the level of warning that is generated by the Angular compiler:</p><ul><li><p translation-result="on">Error（错误）：抛出错误，如果你使用的是 AOT 编译器，构建就会失败。如果使用的是 JIT 编译器，应用的加载就会失败。</p><p translation-origin="off">Error: throw an error. If you are using AOT compilation, the build will fail. If you are using JIT compilation, the app will fail to load.</p></li><li><p translation-result="on">Warning（警告 - 默认）：在控制台中显示一条 “Missing translation” 警告。</p><p translation-origin="off">Warning (default): show a 'Missing translation' warning in the console or shell.</p></li><li><p translation-result="on">Ignore（忽略）：什么也不做。</p><p translation-origin="off">Ignore: do nothing.</p></li></ul><p translation-result="on">你可以在 Angular CLI 构建配置的 <code>configurations</code> 区指定警告级别。下面这个例子展示了如何把警告级别设置为 <code>error</code>：</p><p translation-origin="off">You specify the warning level in the <code>configurations</code> section your Angular CLI build configuration. The example below shows how to set the warning level to error:</p><code-example ng-version="7.0.0"><div style="display:none">"configurations": { ... "fr": { ... "i18nMissingTranslation": "error" } }</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"configurations"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="pun">...</span><span class="pln">
  </span><span class="str">"fr"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="pun">...</span><span class="pln">
    </span><span class="str">"i18nMissingTranslation"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"error"</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">如果你要使用 JIT 编译器，就在启动时往编译器的配置中添加一个 <code><a href="api/core/MissingTranslationStrategy" class="code-anchor">MissingTranslationStrategy</a></code> 属性来指定警告级别。下面的例子示范了如何把警告级别设置为 <code>error</code>：</p><p translation-origin="off">If you use the JIT compiler, specify the warning level in the compiler config at bootstrap by adding the 'MissingTranslationStrategy' property. The example below shows how to set the warning level to error:</p><code-example path="i18n/doc-files/main.3.ts" header="src/main.ts" ng-version="7.0.0"><div style="display:none">import { <a href="api/core/MissingTranslationStrategy" class="code-anchor">MissingTranslationStrategy</a> } from '@angular/core'; import { <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a> } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; // ... <a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor">platformBrowserDynamic</a>().bootstrapModule(AppModule, { missingTranslation: <a href="api/core/MissingTranslationStrategy#Error" class="code-anchor">MissingTranslationStrategy.Error</a>, providers: [ // ... ] });</div><header class="ng-star-inserted">src/main.ts</header><aio-code class="headed-code"><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="Copy code snippet from src/main.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><ol class="linenums"><li class="L0"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/MissingTranslationStrategy" class="code-anchor"><span class="typ">MissingTranslationStrategy</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span></li><li class="L1"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor"><span class="pln">platformBrowserDynamic</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/platform-browser-dynamic'</span><span class="pun">;</span></li><li class="L2"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'./app/app.module'</span><span class="pun">;</span></li><li class="L3"><span class="pln">&nbsp;</span></li><li class="L4"><span class="com">// ...</span></li><li class="L5"><span class="pln">&nbsp;</span></li><li class="L6"><a href="api/platform-browser-dynamic/platformBrowserDynamic" class="code-anchor"><span class="pln">platformBrowserDynamic</span></a><span class="pun">().</span><span class="pln">bootstrapModule</span><span class="pun">(</span><span class="typ">AppModule</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span></li><li class="L7"><span class="pln">  missingTranslation</span><span class="pun">:</span><span class="pln"> </span><a href="api/core/MissingTranslationStrategy#Error" class="code-anchor"><span class="typ">MissingTranslationStrategy</span><span class="pun">.</span><span class="typ">Error</span></a><span class="pun">,</span></li><li class="L8"><span class="pln">  providers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span></li><li class="L9"><span class="pln">    </span><span class="com">// ...</span></li><li class="L0"><span class="pln">  </span><span class="pun">]</span></li><li class="L1"><span class="pun">});</span></li></ol></code>
    </pre></aio-code></code-example><h3 id="build-for-multiple-locales" translation-result="on">为多种语言环境构建<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#build-for-multiple-locales"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="build-for-multiple-locales">Build for multiple locales<a title="Link to this heading" class="header-link" aria-hidden="true" href="guide/i18n#build-for-multiple-locales"><i class="material-icons">link</i></a></h3><p translation-result="on">当你使用 CLI 的 <code>build</code> 或 <code>serve</code> 命令来为不同的语言环境构建应用时，可以使用 <code>--outputPath</code> 选项来更改输出路径，把这些翻译文件保存在不同的位置。 当你通过子目录来为各个语言环境分别启动服务器时，你还要通过指定 <code>--baseHref</code> 选项来修改应用的基地址。</p><p translation-origin="off">When you use the CLI <code>build</code> or <code>serve</code> command to build your application for different locales, change the output path using the <code>--outputPath</code> command option (along with the i18n-specific command options), so that the translation files are saved to different locations. When you are serving a locale-specific version from a subdirectory, you can also change the base URL used by your app by specifying the <code>--baseHref</code> option.</p><p translation-result="on">比如，如果应用的法语版运行在 <a href="https://myapp.com/fr/%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%83%8F%E4%B8%8B%E9%9D%A2%E8%BF%99%E6%A0%B7%E4%B8%BA%E6%B3%95%E8%AF%AD%E7%89%88%E9%85%8D%E7%BD%AE%E6%9E%84%E5%BB%BA%E9%80%89%E9%A1%B9%E3%80%82">https://myapp.com/fr/，可以像下面这样为法语版配置构建选项。</a></p><p translation-origin="off">For example, if the French version of your application is served from <a href="https://myapp.com/fr/">https://myapp.com/fr/</a>, configure the build for the French version as follows.</p><code-example ng-version="7.0.0"><div style="display:none">"configurations": { "fr": { "aot": true, "outputPath": "dist/my-project-fr/", "baseHref": "/fr/", "i18nFile": "src/<a href="api/common/NgLocaleLocalization#locale" class="code-anchor">locale</a>/messages.fr.xlf", "i18nFormat": "xlf", "i18nLocale": "fr", "i18nMissingTranslation": "error", }</div><aio-code><pre class="prettyprint lang-">      <button class="material-icons copy-button no-print ng-star-inserted" title="Copy code snippet" aria-label="">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="str">"configurations"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="str">"fr"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="str">"aot"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"outputPath"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"dist/my-project-fr/"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"baseHref"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"/fr/"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"i18nFile"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"src/</span><a href="api/common/NgLocaleLocalization#locale" class="code-anchor"><span class="str">locale</span></a><span class="str">/messages.fr.xlf"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"i18nFormat"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"xlf"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"i18nLocale"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"fr"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"i18nMissingTranslation"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"error"</span><span class="pun">,</span><span class="pln">
  </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">要了解如何创建脚本来为不同的语言环境生成应用，以及如何配置 Apache 2 来从不同的子目录下启动服务，请阅读 <a href="https://medium.com/@feloy/deploying-an-i18n-angular-app-with-angular-cli-fc788f17e358#.1xq4iy6fp">Philippe Martin 写的这份教程</a>。</p><p translation-origin="off">For more details about how to create scripts to generate an app in multiple languages and how to set up Apache 2 to serve them from different subdirectories, read <a href="https://medium.com/@feloy/deploying-an-i18n-angular-app-with-angular-cli-fc788f17e358#.1xq4iy6fp">this tutorial by Philippe Martin</a>.</p></div></div></aio-doc-viewer></main></mat-sidenav-content></mat-sidenav-container><div class="toc-container no-print ng-star-inserted"><aio-lazy-ce selector="aio-toc"><aio-toc ng-version="7.0.0"><div class="toc-inner no-print collapsed ng-star-inserted"><ul class="toc-list"><li title="国际化（i18n）link" class="h1 ng-star-inserted active"><a href="guide/i18n#internationalization-i18n">国际化（i18n）</a></li><li title="Angular 与 i18nlink" class="h2 ng-star-inserted"><a href="guide/i18n#angular-and-i18n">Angular 与 i18n</a></li><li title="为你的应用设置地区（locale）link" class="h2 ng-star-inserted"><a href="guide/i18n#setting-up-the-locale-of-your-app">为你的应用设置地区（locale）</a></li><li title="i18n 管道link" class="h2 ng-star-inserted"><a href="guide/i18n#i18n-pipes">i18n 管道</a></li><li title="模板翻译link" class="h2 ng-star-inserted"><a href="guide/i18n#template-translations">模板翻译</a></li><li title="使用 i18n 属性标记文本link" class="h3 ng-star-inserted"><a href="guide/i18n#mark-text-with-the-i18n-attribute">使用 <code>i18n</code> 属性标记文本</a></li><li title="用描述和意图来帮助翻译人员link" class="h3 ng-star-inserted"><a href="guide/i18n#help-the-translator-with-a-description-and-meaning">用描述和意图来帮助翻译人员</a></li><li title="设置一个自定义的 id 来提升可搜索性和可维护性link" class="h3 ng-star-inserted"><a href="guide/i18n#set-a-custom-id-for-persistence-and-maintenance">设置一个自定义的 <code>id</code> 来提升可搜索性和可维护性</a></li><li title="翻译文本，而不必创建元素link" class="h3 ng-star-inserted"><a href="guide/i18n#translate-text-without-creating-an-element">翻译文本，而不必创建元素</a></li><li title="翻译属性link" class="h3 ng-star-inserted"><a href="guide/i18n#translate-attributes">翻译属性</a></li><li title="复数与选择的表达式link" class="h2 ng-star-inserted"><a href="guide/i18n#regular-expressions-for-plurals-and-selections">复数与选择的表达式</a></li><li title="复数规则link" class="h3 ng-star-inserted"><a href="guide/i18n#pluralization">复数规则</a></li><li title="在候选文本中选择link" class="h3 ng-star-inserted"><a href="guide/i18n#select-among-alternative-text-messages">在候选文本中选择</a></li><li title="把&quot;复数&quot;与&quot;选择&quot;表达式嵌套在一起link" class="h3 ng-star-inserted"><a href="guide/i18n#nesting-plural-and-select-icu-expressions">把"复数"与"选择"表达式嵌套在一起</a></li><li title="创建翻译源文件link" class="h2 ng-star-inserted"><a href="guide/i18n#create-a-translation-source-file">创建翻译源文件</a></li><li title="输出选项link" class="h3 ng-star-inserted"><a href="guide/i18n#output-options">输出选项</a></li><li title="翻译源文本link" class="h2 ng-star-inserted"><a href="guide/i18n#translate-the-source-text">翻译源文本</a></li><li title="新建一个本土化目录link" class="h3 ng-star-inserted"><a href="guide/i18n#create-a-localization-folder">新建一个本土化目录</a></li><li title="创建翻译文件link" class="h3 ng-star-inserted"><a href="guide/i18n#create-the-translation-files">创建翻译文件</a></li><li title="翻译文本节点link" class="h3 ng-star-inserted"><a href="guide/i18n#translate-text-nodes">翻译文本节点</a></li><li title="翻译复数（plural）和选择（select）表达式link" class="h2 ng-star-inserted"><a href="guide/i18n#translating-plural-and-select-expressions">翻译复数（plural）和选择（select）表达式</a></li><li title="翻译复数link" class="h3 ng-star-inserted"><a href="guide/i18n#translate-plural">翻译<em>复数</em></a></li><li title="翻译选择（select）link" class="h3 ng-star-inserted"><a href="guide/i18n#translate-select">翻译<em>选择</em>（select）</a></li><li title="翻译嵌套的表达式link" class="h3 ng-star-inserted"><a href="guide/i18n#translate-a-nested-expression">翻译嵌套的表达式</a></li><li title="应用及其翻译文件link" class="h3 ng-star-inserted"><a href="guide/i18n#the-app-and-its-translation-file">应用及其翻译文件</a></li><li title="合并已经翻译的文件link" class="h2 ng-star-inserted"><a href="guide/i18n#merge-the-completed-translation-file-into-the-app">合并已经翻译的文件</a></li><li title="使用 AOT 编译器合并link" class="h3 ng-star-inserted"><a href="guide/i18n#merge-with-the-aot-compiler">使用 AOT 编译器合并</a></li><li title="用 JIT 编译器合并link" class="h3 ng-star-inserted"><a href="guide/i18n#merge-with-the-jit-compiler">用 JIT 编译器合并</a></li><li title="汇报缺失的翻译link" class="h3 ng-star-inserted"><a href="guide/i18n#report-missing-translations">汇报缺失的翻译</a></li><li title="为多种语言环境构建link" class="h3 ng-star-inserted"><a href="guide/i18n#build-for-multiple-locales">为多种语言环境构建</a></li></ul></div></aio-toc></aio-lazy-ce></div><footer class="no-print"><aio-footer><div class="grid-fluid"><div class="footer-block ng-star-inserted"><h3>资源</h3><ul><li class="ng-star-inserted"><a class="link" href="about" title="Angular 贡献者。">关于</a></li><li class="ng-star-inserted"><a class="link" href="resources" title="网络上的 Angular 工具、培训、博客等">资源列表</a></li><li class="ng-star-inserted"><a class="link" href="presskit" title="我们的联系方式、LOGO 和品牌">宣传资料</a></li><li class="ng-star-inserted"><a class="link" href="https://blog.angular.io/" title="Angular 官方博客">博客</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>帮助</h3><ul><li class="ng-star-inserted"><a class="link" href="https://stackoverflow.com/questions/tagged/angular" title="Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题">Stack Overflow</a></li><li class="ng-star-inserted"><a class="link" href="https://gitter.im/angular/angular" title="和老鸟聊 Angular">Gitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular/issues" title="在 github 上报告问题和建议。">报告问题</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md" title="让我们彼此尊重">行为规范</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>社区</h3><ul><li class="ng-star-inserted"><a class="link" href="events" title="Post issues and suggestions on github.">活动</a></li><li class="ng-star-inserted"><a class="link" href="http://www.meetup.com/topics/angularjs/" title="参加聚会，向别的开发人员学习">聚会</a></li><li class="ng-star-inserted"><a class="link" href="https://twitter.com/angular" title="Twitter">Twitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular" title="GitHub">GitHub</a></li><li class="ng-star-inserted"><a class="link" href="contribute" title="向 Angular 做贡献">做贡献</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>多语言</h3><ul><li class="ng-star-inserted"><a class="link" href="https://angular.io/" title="English Version.">English Version</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.jp/" title="日本語版">日本語版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.kr/" title="한국어">한국어</a></li></ul></div></div><p>Super-powered by Google ©2010-2019. 代码授权方式：<a href="license" title="License text">MIT-style License</a>. 文档授权方式：<a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p><p>当前版本：8.0.0-build.95+sha.43aadf1.</p></aio-footer></footer><mat-icon class="cdk-visually-hidden mat-icon material-icons ng-star-inserted" role="img" aria-hidden="true">&nbsp;</mat-icon></aio-shell><noscript><div class="background-sky hero"></div><section id="intro" style="text-shadow:1px 1px #1976d2"><div class="hero-logo"><img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular"></div><div class="homepage-container"><div class="hero-headline">一套框架，多种平台<br>移动 &amp; 桌面</div></div></section><h2 style="color:red;margin-top:40px;position:relative;text-align:center;text-shadow:1px 1px #fafafa"><b><i>该网站需要浏览器支持 JavaScript</i></b></h2></noscript><script src="runtime.fa3355727d5250409e08.js"></script><script src="polyfills.a2efc1c1a62312ff1f80.js"></script><script src="main.02884fe4cde5ede2ec4e.js"></script><div class="cdk-live-announcer-element cdk-visually-hidden" aria-atomic="true" aria-live="polite"></div></body></html>